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

    除了上一节讲到的插入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,变成了行内元素,所以少了一些功能,比如设定长度值。

  • 相关阅读:
    测试PHP-FPM的工作流中的疑惑点
    摘要
    Centrifugo简单试用
    react-redux的基本用法
    PHP中使用ElasticSearch(二)
    PHP中使用ElasticSearch(一)
    Vue中的状态管理器
    Laravel数据库迁移
    快速搭建一个vue开发环境
    使用cURL尝试ElasticSearch
  • 原文地址:https://www.cnblogs.com/Rinpe/p/5558993.html
Copyright © 2011-2022 走看看