关于水平居中

水平居中——行内元素
对于如文本,图片等行内元素,使用text-align:center;

水平居中——定宽块状元素
前提条件:
1. 宽度确定
2. 块状元素
方法:左右margin设为auto;

<div>定宽块状元素</div>
div{
    width:500px;
    margin:10px auto;
}

水平居中——不定宽块状元素
在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中,比如网页上的分页导航,因为分页的数量是不确定的,所以我们不能通过设置宽度来限制它的弹性。
三种方法:

  1. 加入table标签
    第一步:为需要居中的元素加上table标签(包括tbody tr td);
    第二步:为这个table设置左右margin为auto;
html代码
<div>
    <table>
        <tbody>
            <tr>
                <td>
                    <ul>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                     </ul>
                </td>
            </tr>
        </tbody>
    </table>
</div>
css部分
<style type="text/css">
    table{
        margin:0 auto;
    }
    ul{
        list-style:none;
        margin:0;
        padding:0;
    }
    li{
        float:left;
        display:inline;
        margin-right:8px;
    }
</style>
  1. 设置display:inline
    第一步:将该块级元素设置display:inline;
    第二步:使用text-align:center;
html部分
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
css部分
<style>
    .container{
        text-align:center;
    }
    .container ul{
        list-style:none;
        padding:0;
        margin:0;
        display:inline;
    }
    .container li{
        margin-right:8px;
        display:inline;
    }
</style>
  1. positoin:relative
    第一步:给父元素设置float;
    第二步:父元素position:relative;left:50%;
    第三步:子元素设置 position:relative 和 left:-50% 来实现水平居中。
html部分
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
css部分
<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>
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/cindy_rain/article/details/49892313
文章标签: 水平居中
个人分类: css
上一篇css的某些特殊属性
下一篇关于垂直居中
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭