1,水平居中
1-1,行内元素居中
h1 { text-align: center }
运行效果:
可以设置文本,图片等居中排列1-2,定宽块状元素居中
.div1 {
border: 1px solid red;
width: 200px;
background-color: #ff0;
margin: 30px auto
}
运行效果:
设置“margin: 30px auto”来实现块状元素居中,元素必须满足定宽(宽度width是固定值)和块状两个条件
1-3,不定宽块状元素居中
不定宽度的块状元素有三种方法居中:
1)加入table标签
利用table标签的长度自适应性(table其长度根据其内文本长度决定),因此可以看做一个定宽度块元素,然后再利用定宽度块状居中的margin的方法,使其水平居中。
步骤如下:
第一步:为需要居中的元素外面加入一个 table 标签(包括 <tbody>,<tr>,<td>)
<div>
<table>
<tbody>
<tr>
<td> 不定宽元素一 </td>
</tr>
</tbody>
</table>
</div>
第二步:为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)。
table {
border: 1px solid red;
margin: 0 auto
}
div { border: ipx solid red }
运行效果:
2)设置display: inline方法:
改变块级元素的 display 为 inline 类型(设置为 行内元素 显示),然后使用 text-align: center 来实现居中效果
.div2 { text-align: center }
运行效果:
.div2 ul { display: inline }
运行效果:
.div2 li {
display: inline;
border: 1px solid red;
margin-right: 20px
}
运行效果:
将上面三组css样式组合为一组,
.div2 { text-align: center }
.div2 ul {
border: 1px solid yellow;
display: inline
}
.div2 li {
display: inline;
border: 1px solid red;
margin-right: 20px
}
运行效果:
这种相比第一种的优势是不用增加无语义标签,但也存在着一些问题:它将块状元素的 display 类型改为 inline,变成了行内元素,减少了一些功能,比如设定长度值。
3)设置position: relative和 left: 50%:
利用相对定位的方式,将元素向左偏移50%,即达到居中的目的
.div3 {
position: relative;
left: 50%
}
运行效果:
2,垂直居中
2-1,父元素高度确定的单行文本
设置父元素的 height 和 line-height 高度一致来实现
.div4 {
height: 200px;
line-height: 200px;
background-color: #0cc
}
运行效果:
注:
这种文字行高与块高一致带来了一个弊端:当文字内容的长度大于块的宽时,就有内容脱离块。
2-2,父元素高度确定的多行文本
1)使用插入 table (包括tbody、tr、td)标签,同时设置 vertical-align: middle。
<div>
<table>
<tbody>
<tr>
<td class="td1">
<p>父元素高度</p>
<p>父元素高度</p>
<p>父元素高度</p>
<p>父元素高度</p>
<p>父元素高度</p>
</td>
</tr>
</tbody>
</table>
</div>
css代码:
.td1 {
height: 500px;
background: #cc0
}
运行效果:
td 标签默认情况下就默认设置了 vertical-align 为 middle,因此我们不需要设置
2)设置块级元素的 display 为 table-cell(设置为表格单元显示),激活 vertical-align 属性
.div5 {
height: 300px;
background: #1F0;
display: table-cell;
vertical-align: middle
}
运行效果:
chrome、firefox 及 IE8 以上的浏览器下可以设置,IE6、7 并不支持这个样式, 兼容性比较差,只供大家学习参考。
3,隐性改变display类型
有一个有趣的现象就是当为元素(不论之前是什么类型元素,display: none除外)设置以下2个句之一:
1. position: absolute
2. float: left 或 float: right
简单来说,只要html代码中出现以上两句之一,元素的display显示类型就会自动变为以display: inline-block(内联块状元素)的方式显示,当然就可以设置元素的width和height了,且默认宽度不占满父元素。
.div6 {
width: 300px;
height: 200px
}
.div6 a {
float: left; /*或 position: absolute*/
width: 100px;
background: #0cc
}
运行效果:
网友评论