水平居中

行内元素

text-align:center
<body>
<div class="txtCenter">内容居中</div>

<style>
    .txtCenter{
        text-align:center;
    }
</style>
</body>

 

定宽块状元素

margin:20px auto;
<div class="fixedCenter">内容居中</div>

.fixedCenter{
        width: 100px;
        border: 1px solid #000;
        margin: 10px auto;
    }

 

 

不定宽块状元素

.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;
    }


    <div class="container">
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
        </ul>
    </div>

 

posted @ 2016-10-13 14:27  Mr.Ming2  阅读(133)  评论(0)  编辑  收藏  举报