关于水平居中

原创 2015年11月17日 19:52:25

水平居中——行内元素
对于如文本,图片等行内元素,使用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>
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

图片水平垂直居中css

  • 2010年05月20日 15:19
  • 44KB
  • 下载

未知宽高div水平垂直居中3种方法

未知宽高div水平垂直居中3种方法:1、transform与绝对定位方式。2、Flexbox方式。3、伪类方式...
  • rongku
  • rongku
  • 2014年10月25日 13:46
  • 5094

未知高度的div在父元素中水平垂直居中的方法

居中方法暂时找到两种: 1、父元素: 在父元素中使用: display: flex; justify-content: center; align-items: center; 这些属性,即可...

css水平居中4种方式

  • 2008年12月18日 10:55
  • 91KB
  • 下载

实现div里的img图片水平垂直居中

body结构 方法一: 将display设置成table-cell,然后水平居中设置text-align为center,垂直居中设置vertical-align...
  • DreamFJ
  • DreamFJ
  • 2017年03月31日 09:53
  • 21376

jQuery的div 重直水平居中

  • 2015年08月13日 16:06
  • 1KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:关于水平居中
举报原因:
原因补充:

(最多只允许输入30个字)