首页 » CSS » HTML+CSS之实现水平居中的方法记录

HTML+CSS之实现水平居中的方法记录

原文 http://blog.csdn.net/gsw333/article/details/79087409

2018-01-20 02:00:10阅读(367)

写布局的时候经常需要用到居中,由于本人是安卓开发者,很少使用前端知识,所以防止忘记,自己记录下来,也随便大家可能用得上。

关于水平居中,主要分为两种,一种是行内元素,一种是块级元素。

行内元素不能设置宽度,而是根据内容自适应宽度的,即使设置了宽度也没用,对于这种,使用text-align:center就可以了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            background: red;
            text-align: center;
        }
        span {
            background: green;
        }
        a{
            background: yellow;
        }
    </style>
</head>
<body>
<div>
    <span>行内元素居中</span>
    <a href="www.baidu.com">行内元素居中</a>
</div>
</body>
</html>
运行效果如下:

HTML+CSS之实现水平居中的<a href=方法记录" src="http://img.blog.csdn.net/20180117170802992?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ3N3MzMz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="" />

如上所示,内容居中了,因为内容是行内元素,所以text-align解决。


下面复杂点的是块级元素。大家都知道,正常情况下行内元素宽度是不可设置了,设置了也没用。块级元素可以设置宽度,所以就有两种情况了,一种是设置了具体宽度的块级元素,还有一种就是没设置具体宽度的块级元素(因为很多时候我们元素的宽度并不是固定的,而是根据内容来确定的,但是如果没设置宽度,那么默认宽度就是占满了)。

对于定宽的块级元素来说,很简单,使用margin : xx auto;即可,设置上下padding,然后左右auto即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定宽块级元素水平居中</title>
    <style>
        div {
            height: 40px;
            background: red;
        }
        ul {
            background: green; /*为了显示居中效果明显设置了背景色*/
            width: 500px; /*定宽*/
            height: 10px;
            margin: 0px auto; /* margin-left 与 margin-right 设置为 auto */
        }
    </style>
</head>
<body>
<div>
    <ul></ul>
</div>
</body>
</html>
效果如下:

HTML+CSS之实现水平居中的方法记录HTML+CSS之实现水平居中的方法记录
对于不定宽块级元素,常用的几种方法如下。

方式1:

使用table,利用table自身的特性“默认宽度根据内容自适应”,这样它就相当于宽度固定了,就可以使用上面的方法来居中了:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS学习</title>
    <style>
        table {
            margin: 0 auto;
        }
        div{
            background: green;
        }
        /*table的自带属性,内容自适应,用table来包围块元素ul让它内容自适应*/
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
            background: red;
        }
    </style>
</head>
<body>
<div>
    <table>
        <tbody>
        <tr>
            <td>
                <ul>
                    <li><a href="www.baidu.com">1</a></li>
                    <li><a href="www.baidu.com">2</a></li>
                    <li><a href="www.baidu.com">3</a></li>
                </ul>
            </td>
        </tr>
        </tbody>
    </table>
</div>
</body>
</html>

效果如下:

HTML+CSS之实现水平居中的方法记录

我们用table包含块级元素ul,然后再用margin:xx auto使其水平居中即可,效果就是我们看到的了。但是ul是居中了,如果我们想让它的li元素并排显示怎么办?很简单,我们让li这个块级元素变成行内元素就行:

 /*display:inline设置li元素为行内元素,因为ul有3个li元素,正常情况是从上大小排列,每个li元素占一行的,
        给li元素设置为行内元素,让li元素跟前后元素在同一行*/
        li {
            float: left;
            display: inline;
            margin-right: 8px;
            background: yellow;
        }

结果如下:

HTML+CSS之实现水平居中的方法记录

方式2:
方式1我们是用table包着的,方式2跟方式1原理一样,不过我们不需要用table标签包着了,直接给ul设置下如下代码即可:

            display: table;
            margin: 0 auto;
使用display:table的效果就跟上面一样,让ul宽度自适应,相当于是定宽块级元素了,然后用margin:0 auto水平居中.


方式3:我们利用positon:relative的特性设置left来让他们居中:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*我们可以这样理解:假想ul层的父层(即下面例子中的div层)中间有根线固定的(作为一个整体布局的中间位置的标记,不会随着div移动),那么div的css效果就是把div移动到与那个线对齐的地方,ul层的css代码是将ul层的最左端与ul层的父层(div层)的平分线对齐;而li层的css代码则是将li层的平分线与ul层的。
        最左端(也是div层的平分线)对齐,从而实现li层的居中。*/
        .container {
            padding: 10px;
            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>
</head>
<body>
<div class="container">
    <!-- 代码区 -->
    <ul>
        <li><a href="www.baidu.com">1</a></li>
        <li><a href="www.baidu.com">2</a></li>
        <li><a href="www.baidu.com">3</a></li>
    </ul>
</div>
</body>
</html>
解释已经写在上面了注意,我们给div设置了float:left,是为了让它浮动到左边(实现宽度自适应,不然的话宽度是满的)。

方式4:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            text-align:center;
        }
        /*display:inline设置ul元素为行内元素,这样就可以设置父元素text-align:center来实现内容的水平居中*/
        .container ul{
            list-style:none;
            margin:0;
            padding:0;
            display:inline;
            background: red;
        }
        /*display:inline设置li元素为行内元素,因为ul有3个li元素,正常情况是从上大小排列,每个li元素占一行的,
        给li元素设置为行内元素,让li元素跟前后元素在同一行*/
        .container li{
            margin-right:8px;
            display:inline;
            background: green;
        }
    </style>
</head>
<body>
<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>
</body>
</html>
很简单,使用display:inlne将块级元素变成行内元素,然后利用行内元素的居中方式来进行居中。
方式2、方式3、方式4效果都跟方式1的最后效果一样,就不重复贴图了。






最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹