css和HTML布局小技巧

一：水平居中

1. 如下所示，让child在parent中水平居中

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>.parent{ width:300px; height:200px; border:1px solid #000; text-align: center; }.child{  width: 50px;  height:50px;  border:1px solid red;  display: inline-block;}</style>
</head>
<body>
<div class="parent"><div class="child"></div>
</div>
</body>
</html>

第一种方法：给父元素添加text-align：center属性，把子元素变成行内框，display：inline-block；（子元素可以是行内元素也可以是块级元素）

第二种方法：给子元素添加margin:0 auto;属性（子元素必须有宽度，而且必须是块级元素）；

第三种方法：利用绝对定位和相对定位实现

       .parent{width:300px;height:200px;border:1px solid #000;position: relative;//设置相对定位以配合子元素的绝对定位}.child{width: 50px;height:50px;border:1px solid red;position: absolute;left:50%;margin-left: -25px;//元素宽度的一半}

二，垂直居中

第一种方法：和上面一样利用绝对定位

       .parent{width:300px;height:200px;border:1px solid #000;position: relative;//设置相对定位以配合子元素的绝对定位}.child{width: 50px;height:50px;border:1px solid red;position: absolute;top:50%;margin-top: -25px;}

第二种方法：

给parent增加

display:table-cell;vertical-align: middle;

转载于:https://www.cnblogs.com/longailong/p/7338371.html

css和HTML布局小技巧相关推荐

第八十四节，css布局小技巧及font-awesome图标使用
css布局小技巧及font-awesome图标使用图片鼠标放上去遮罩效果,显示文字当鼠标放上去时 /*最外层div*/ .a{width: 384px;height: 240px;backgrou ...
java 自适应屏幕_自适应屏幕的CSS响应式布局设计技巧总结
摘要:这篇CSS教程栏目下的"自适应屏幕的CSS响应式布局设计技巧总结",介绍的技术点是"css响应式.响应式布局.响应式.自适应.CSS.设计",希望对大家开 ...
css选择器顺序的小技巧
在线演示本地下载 css的选择器的顺序其实很有意思,如果应用的好的话,可以做一些简单的逻辑出来,配合上css3,就可以尽可能的脱离js了. 这里的演示是一个带有hover事件的四张照片,效果来自一个 ...
【建议收藏】17个XML布局小技巧
前言我们开发时接触最多的就是xml布局了,还记得我们写Android的第一个Hello World吗,就是通过activity_main.xml显示出来的. 虽然xml写的很多,而且也没有什么技术难 ...
CSS垂直及水平居中小技巧
CSS垂直及水平居中小技巧水平居中 margin法 flex法效果垂直居中 line-height法 flex法效果水平居中 margin法 html代码 <div class=&qu ...
css flex 布局小技巧和bug
小技巧: 实现如图子元素自动居于右下角 .container { display: flex;flex-direction: row;background: pink;}.child {backgr ...
pc全屏网页布局小技巧
今天又写了一个全屏网页,其实之前也写了很多次,一直都没有总结,今天在这里总结出来的小技巧记录一下.pc的设计图一般都1920的,但是还有很多小屏,比如自己的笔记本就是1366,如果说完全按照设计图的尺 ...
超 Nice 的表格响应式布局小技巧
今天,遇到了一个很有意思的问题,一名群友问我,仅仅使用 CSS,能否实现这样一种响应式的布局效果: 简单解析一下效果: 1.在屏幕视口较为宽时,表现为一个整体 Table 的样式 2.而当屏幕视口宽度 ...
css background 一半_CSS小技巧
点击上方蓝字关注我们左右布局将内部的子元素加浮动,父元素清除浮动即可. 代码: DOCTYPE html><html><head><title>tes ...

css和HTML布局小技巧

css和HTML布局小技巧相关推荐

最新文章

热门文章