鉴于我的记性只有七秒,做页面的时候,居中总是遇到各种问题,所以将各类居中并适用于什么情况做了一个整理,方便以后查阅
首先说一下text-align:center与margin:0 auto;的区别:text-align是对块元素的文本、图片进行居中,margin是对块元素居中
1.垂直居中:vertical-align:middle;
自己试了一下,对于文本没办法完成,也有可能是方法不当
看了一下w3c,是这么说的:
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。
只有关于图像是如何对齐的例子:
<p>
这是一幅<img border="0" src="1.jpg" style="vertical-align:text-bottom"/>位于段落中的图像。
</p>
<p>
这是一幅<img style="vertical-align:middle" border="0" src="1.jpg" />位于段落中的图像。
</p>
示例图:
2.水平居中:text-align:center;
应为块级元素(div、p、input、ul、h1等),行内元素下不起作用(a、span等),可通过display:block等方式将行内元素转化为块级元素
<p style ="text-align: center;"><img src="1.jpg"></p>
<p style ="text-align: center;">呦呦呦</p>
示例图:
3.关于我们经常用的margin:0 auto;
- 定块状元素(即宽度一定):width: 200px;margin:0 auto;
- 不定块状元素(即宽度不定):display:table;margin:0 auto;
<p style ="margin:0 auto;background-color:green;width:200px;">啊哈哈</p>
示例图:
4.关于垂直居中的:height:150px;line-height: 150px,一定要有高度,等于line-height(行间距)值即可居中
<p style ="height:150px;line-height: 150px;background-color:green;width:200px;">大龙虾</p>
示例图:
5.居中一个浮动元素一:
1)设定块元素的宽(必需)width:400px;、高,
2)为块元素设置:margin-left:50%;position:relative;left:-200px;
这里的left值应为块元素宽度的一半
设置margin-left:50%后,此浮动元素左边正好位于文档中间,设置块相对定位position:relative;,然后左移宽度的二分之一,即可实现元素居中
<div style="width:400px;margin-left:50%;position:relative;left:-200px;background-color:blue;">可乐啊</div>
居中一个浮动元素二:
<div style="width:200px;margin:0 auto;position:relative;background-color: #eee;">我的脸啊</div>
示例图:
6.块内元素上下左右都居中:
<div style="height:50px;width:150px;line-height: 50px;background-color:pink;text-align: center;">啊哈哈</div>
示例图:
7.块的上下左右都居中一:
<div style="height:80px;width:150px;line-height:80px;background-color:#eee;margin: 0 auto;">黑胡椒氨基酸</div>
示例图:
块的上下左右都居中二:
<div style="position: relative;width:400px;height:400px;background-color:pink;">
<div style="width:100px;height:100px;position: absolute;top:50%;margin-top:-50px;left:50%;margin-left:-50px;background-color:#fff;">哈哈哈了</div>
</div>
示例图:
8.块及内部上下左右都居中:
<div style="height:80px;width:150px;line-height:80px;background-color:#eee;text-align: center;margin: 0 auto;">黑胡椒氨基酸</div>
示例图:
以上是自己关于居中的一点小总结,有不对或不到位的地方欢迎指正,不喜勿喷,欢迎交流~~