zoukankan      html  css  js  c++  java
  • html+css-水平居中-不定款块状元素方法(二)

    来源:http://www.imooc.com/code/6364

    除了上一节讲到的插入table标签,可以使不定宽块状元素水平居中之外,本节介绍第2种实现这种效果的方法,改变元素的display类型为行内元素,利用其属性直接设置。

    第二种方法:改变块级元素的 display 为 inline 类型(设置为 行内元素 显示),然后使用 text-align:center 来实现居中效果。如下例子:

    html代码:

    <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>

    css代码:

    <style>
    .container{
        text-align:center;
    }
    /* margin:0;padding:0(消除文本与div边框之间的间隙)*/
    .container ul{
        list-style:none;
        margin:0;
        padding:0;
        display:inline;
    }
    /* margin-right:8px(设置li文本之间的间隔)*/
    .container li{
        margin-right:8px;
        display:inline;
    }
    </style>

    这种方法相比第一种方法的优势是不用增加无语义标签,但也存在着一些问题:它将块状元素的 display 类型改为 inline,变成了行内元素,所以少了一些功能,比如设定长度值。

  • 相关阅读:
    pku 1330 LCA
    最近公共祖先(LCA)的Tarjan算法
    字典数模板
    字典树
    RMQ问题ST算法与模板
    RMQ(Range Minimum/Maximum Query)问题:
    罗穗骞的dc3和倍增法
    多重背包问题
    tarjan LCA 算法
    终极工程师的造诣 – 不迷信高科技的乔布斯给我们的启示
  • 原文地址:https://www.cnblogs.com/miaoiao/p/5540025.html
Copyright © 2011-2022 走看看