居中显示我们一般会用text-align:center。但是这个仅限于行内元素,而不能用于块状元素。
(
行内元素:比如<label>、<span>、<a>这些不会自己独占一行的元素,高度、宽度、边距不可以调节。
块状元素:比如<div>、<table>,<form>这些自己独占一行的元素,并且宽度默认是100%,高度、宽度、边距都可以调节。
)
块状元素设置居中方法
分为宽度固定的块状元素和不固定块状元素。
固定宽度
固定宽度的块状元素如下设置:
margin: 10px auto; //左右设为auto
不固定宽度
三种解决方案:
1.采用table将这个块状元素包裹
2.使用dispplay:inline设为行内元素。
3.绝对定位偏移
table方法
<style>
table{
margin:0 auto;
}
</style>
<table> <tbody> <tr> <td> <div>不固定宽度div</div> </td> </tr> </tbody> </table>
原理:table宽度由内容决定,因此这个table宽度是由div文字决定宽度,可以看作是固定宽度了,采用固定宽度的解决办法就可以了。
inline方法div{
dispplay:inline
text-align:center
}
偏移方法
通过使用绝对定位设置偏移量但不如上面的方式。