关闭

关于水平居中

标签: 水平居中
116人阅读 评论(0) 收藏 举报
分类:

水平居中——行内元素
对于如文本,图片等行内元素,使用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>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:4855次
    • 积分:190
    • 等级:
    • 排名:千里之外
    • 原创:15篇
    • 转载:4篇
    • 译文:0篇
    • 评论:0条
    文章分类