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,变成了行内元素,所以少了一些功能,比如设定长度值。

  • 相关阅读:
    python实现清屏
    列表/字典/集合解析式和生成器
    SQL——pivot的用法
    前端的3大类描述
    2019-耦合性斗争笔记
    前端基础语法
    解决winform在win10下字体模糊的问题
    Xamarin.Android打包设置
    N0---我的编程教学提纲
    N0---关于变量
  • 原文地址:https://www.cnblogs.com/miaoiao/p/5540025.html
Copyright © 2011-2022 走看看