首页 > 代码库 > 元素水平居中的几个方法

元素水平居中的几个方法

1、行内元素的居中

例如想设置文本、图片等行内元素水平居中时,可以通过父元素设置 text-align:center 来实现,即给需要设置的元素添加一个父元素的容器,然后设置这个父元素(容器)的text-align属性即可。方法简单,原理也很容易理解,需要注意的是只能针对行内元素;

 

<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box1{
            text-align:center;
        }
    </style>
</head>
<body>
    <div id="box1">
        <span>想让行内元素居中显示</span>
    </div>

</body>
</html> -->

效果图:

技术分享

2、宽度一定的块状元素居中

因为是块状元素,所以就没办法运用第一种方法的text-align属性了,这次我们是通过对需要设置的元素的“左右margin”值为“auto”来实现,margin的上下值可以根据需求随意设置,但是左右一定要为”auto”!需要注意的是,在设置 margin:20px auto 之前,一定要先设置width的值,即最后的设置样例为: 
div { border:2px solid red; width:100px; margin:20px auto; } 
即2个像素宽的红色实体边框,整个div元素的宽度为100像素,上下距离浏览器的空白边距为20像素,左右根据内容自动调整,这样就实现了块状元素的居中显示,别忘了,要先设置width:宽度值!宽度值!宽度值!这种方法优点是简单易懂,兼容性也强,但是扩展性比较差,无法自适应未知宽度的元素。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .nj{
            width:600px;
            margin: 0 auto;
            border:1px solid black;
        }
    </style>
</head>
<body>
    <div id="box2">
        <div class="nj">想让行内元素居中显示</div>
    </div>

</body>
</html>

 

效果图:

技术分享

 

3、宽度不确定块状元素的居中显示。

这里大概也可以分为三个方法: 


1)运用table标签;2)设置display:inline;3)设置position:relative和left:50%。

 

3.1、运用table标签。第一步:在需要设置的元素外面加上一个table标签(包括,是不是有点类似设置行内元素时添加一个父元素的容器呢?)。第二步:给这个table设置”左右margin居中”(这里又和设置定宽块状元素的方法一样了)。

 

1)运用table标签;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        table {margin: 0 auto;}
    </style>
</head>
<body>
    <table>
        <tbody>
            <tr><td>
                <a href="http://www.mamicode.com/#">Prev</a>
                <a href="http://www.mamicode.com/#">1</a>
                <a href="http://www.mamicode.com/#">2</a>
                <a href="http://www.mamicode.com/#">3</a>
                <a href="http://www.mamicode.com/#">4</a>
                <a href="http://www.mamicode.com/#">5</a>
                <a href="http://www.mamicode.com/#">Next</a>
            </td></tr>
        </tbody>
    </table>
</body>
</html>

总结:就是将需要进行居中的元素,用一个大表格将其围起来(而且这个表格只有这一个单元格哦),然后设置表格的属性(如第2条方法)居中就行。不过缺点是加了不少的无用标签,代码看起来比较臃肿。

技术分享

3.2)、改变块级元素的display为inline类型,然后设置text-align:center来实现居中效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container {text-align: center;}
        .container li {display: inline;}
    </style>
</head>
<body>
    <div class="container">
        <ul>
            <li><a href="http://www.mamicode.com/#">fewe</a></li>
            <li><a href="http://www.mamicode.com/#">fewa</a></li>
            <li><a href="http://www.mamicode.com/#">d</a></li>
            <li><a href="http://www.mamicode.com/#">3</a></li>
            <li><a href="http://www.mamicode.com/#">dwedfe</a></li>
            <li><a href="http://www.mamicode.com/#">5</a></li>
            <li><a href="http://www.mamicode.com/#">Next</a></li>
        </ul>
    </div>
</html>

总结:首先将需要居中的块级元素的display属性设置为inline,这样的目的是先把块级元素变为行内元素,可以在一行内显示,然后将这些元素的父级元素text-align设置为:center即可。大概原理就是:块级->行内->居中(参照第1条方法),不过缺点也很明显,块级元素的一些特点没有了,例如高度、宽度设置等。

技术分享

 

3.3)、运用float属性,主要的思想也就是将所需要居中的元素先float到左边,这样就能在一行内显示,然后将整个列表float到父元素左边,然后设置left来设置居中。怎么设置呢?先设置父元素:left:50%,这样整个父元素就往右便宜50%,然后设置列表:right:50%,这样列表的东西再往左走父元素的50%,这样就达到了居中的目的。 
代码样例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .container {
            float:left;
            position: relative;
            left: 50%;
        }
        .container ul {
            /*float: left;*/
            position: relative;
            right: 50%; 
            padding:0;
            margin: 0;
        }
        .container li {
            /*float: left;*/
            position: relative;
            display: inline;
        }
        .container a {
            padding: 0 20px;
        }

    </style>
</head>
     <div class="container">
        <ul>
            <li><a href="http://www.mamicode.com/#">Prev</a></li>
            <li><a href="http://www.mamicode.com/#">1</a></li>
            <li><a href="http://www.mamicode.com/#">2</a></li>
            <li><a href="http://www.mamicode.com/#">3</a></li>
            <li><a href="http://www.mamicode.com/#">4</a></li>
            <li><a href="http://www.mamicode.com/#">5</a></li>
            <li><a href="http://www.mamicode.com/#">Next</a></li>
        </ul>
    </div>
</html>

总结:基本思想也就是将父元素(容器)先往右偏移父容器宽度的50%,然后再将列表的元素向左相对偏移50%,就可以得到居中的效果。(这个方法不理解的话可以看下边W3C博客,那里边介绍的详细,具体链接见下边叙述。)不过我当时在测试这一点的时候,有个问题,就是ul的padding和margin没有清零,然后导致一直不太居中,后来清零就好了。

技术分享

 

元素水平居中的几个方法