css各项水平居中

时间:2023-03-09 12:58:44
css各项水平居中

当被设置元素为块状元素时用text-align:center就不起作用了,这也分两种情况,定宽块状元素和不定宽块状元素。

一.定宽块状元素:快状元素的宽度width为固定值,之后我们可以将左右margin值设置为auto来实线居中。

<html>
<head>
<style>
div{
margin-left:auto;
margin-right:auto;
width:200px;
border:2px red solid;
}
</style>
</head>
<body>
<div>123</div>
</body>
<html>

这种方法必须要有width和margin值为auto才能成功。

二.

不定宽块状元素方法(一):

加入table标签,这种方法是利用table标签的长度自适应性,即不定义其长度也不默认父元素body的长度,因此可以看做一个定宽度元素,然后在利用定宽度块状居中的margin的方法,使其居中。

第一步:为需要设置的居中的元素外面加入一个table标签。

第二步:为这个table设置左右margin居中。

<html>
<head>
<style>
table{
border:1px solid;
margin:0 auto;
}
</style>
</head>
<body>
<div>
<table>
<tbody>
<tr>
<td>123</td>
</tr>
<tr>
<td>123</td>
</tr>
<tr>
<td>123</td>
</tr>
</tbody>
</table>
</body>
</html>

不定宽块状元素方法(二):

出来上面讲到的插入table标签,可以使不定宽快船个元素水平居中之外,本节介绍的方法,改变元素的display类型为行内元素,利用其属性直接设置。

第二种方法:改变块级元素的display为inline类型,然后使用text-align:center实线居中效果,如下:

<html>
<head>
<style>
div{
text-align:center;
}
ul{
display:inline;
}
li{
display:inline;
}
</style>
</head>
<body>
<div>
<ul>
<li>123</li>
<li>123</li>
</ul>
</div>
</body>
</html>

不定宽块状元素方法(三)

出来前两节讲到的插入table标签,以及改变元素的display类型,第三种实现的方法,设置浮动和相对定位来实线。

通过给父元素设置float,然后给父元素设置position:relative和left:-50%来实线水平居中。

我们可以这样理解:假象ul层的父层(div层)平均分为两份,ul层的css代码是将ul层的父层(div层)的平分线对其;而li层的css代码则是将li层的最左端(也是div层的平分线)对齐,从而实线li层的居中。

<body>
<div class="container">
<ul>
<li><123/li>
</ul>
</div>
</body>
<style>
.container{
float:left;
position:relative;
left:50;
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{
float:left;display:inline;margin-right:8px;}
</style>