zoukankan      html  css  js  c++  java
  • 【css】谈谈 css 的各种居中——读编写高质量代码有感

    css 的居中有水平居中和垂直居中,这两种居中又分为行内元素居中和块级元素居中,不同的居中用不同方法。

    水平居中

    1、行内元素水平居中(文本,图片)

    给父层设置 text-align:center; 可以实现行内元素水平居中。

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        .center{text-align:center;}
        </style>
    </head>
    <body>
        <div class="center">
            <a href="http://www.google.com.hk/">谷歌搜索</a><br/><br/>
            <img src="cat.jpg" width="248" height="162" alt=""/>
        </div>
    </body>
    </html>

    2、确定宽度块级元素水平居中

    确定宽度的块级元素水平居中,常用的有 margin:0 auto; 相信很多开发人员都用的是这个,不过本人认为还有更好的写法:margin-left:auto;margin-right:auto; 因为 margin-top 和 margin-bottom 在重置 css 时就已经写了为 0 了。

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        .center{width:100px;height:100px;margin-left:auto;margin-right:auto;background:green;}
        </style>
    </head>
    <body>
        <div class="center"></div>
    </body>
    </html>

    3、不确定宽度的块级元素水平居中

    不确定宽度的块级元素有三种方法实现。

    方法一:

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        *{margin:0;padding:0;}
        ul{list-style:none;}
        table{margin-left:auto;margin-right:auto;}
        .demo li{float:left;display:inline;margin-right:5px;}
        .demo a{float:left;width:20px;height:20px;text-align:center;line-height:20px;background:#316ac5;color:white;border:1px solid #316ac5;text-decoration:none;}
        .demo a:hover{background:white;color:#316ac5;}
        </style>
    </head>
    <body>
        <table>
            <tbody>
                <tr>
                    <td>
                        <ul class="demo">
                            <li><a href="#">1</a></li>
                        </ul>
                    </td>
                </tr>
            </tbody>
        </table>
        <table>
            <tbody>
                <tr>
                    <td>
                        <ul class="demo">
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                        </ul>
                    </td>
                </tr>
            </tbody>
        </table>
        <table>
            <tbody>
                <tr>
                    <td>
                        <ul class="demo">
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                        </ul>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
    </html>

    这里用到了 table 标签来实现不确定宽度的块级元素水平居中。table 本身不是块级元素,如果不给它设定宽度的话,会由内部元素的宽度“撑开”,但即使不设定它的宽度,仅设置 margin-left:auto 和 margin-right:auto 就可以实现水平居中。

    这种方法很巧妙,但是增加了无语义标签,加深了标签的嵌套层数。

    方法二:

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        *{margin:0;padding:0;}
        ul{list-style:none;}
        .wrapper{width:500px;height:100px;background:black;}
        .demo{text-align:center;padding:5px;}
        .demo li{display:inline;}
        .demo a{padding:2px 6px;background:#316ac5;color:white;border:1px solid #316ac5;text-decoration:none;}
        .demo a:hover{background:white;color:#316ac5;}
        </style>
    </head>
    <body>
        <div class="wrapper">
            <ul class="demo">
                <li><a href="#">1</a></li>
            </ul>
            <ul class="demo">
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
            </ul>
            <ul class="demo">
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
            </ul>
        </div>
    </body>
    </html>

    方法二是改变元素的 display 值,使块级元素变成行内元素,然后使用 text-align:center 使其居中。相对于方法一,它不用增加无语义标签,简化了标签的嵌套深度,但它也存在一定的问题:它将块级元素变成了行内元素,这样就失去了一些块级元素的功能,比如设置宽度,高度。

    方法三:

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        *{margin:0;padding:0;}
        ul{list-style:none;}
        .wrapper{width:500px;height:100px;background:black;}
        .demo{clear:both;padding-top:5px;float:left;position:relative;left:50%;}
        .demo li{display:inline;float:left;margin-right:5px;position:relative;left:-50%;}
        .demo a{float:left;width:20px;height:20px;text-align:center;line-height:20px;background:#316ac5;color:white;border:1px solid #316ac5;text-decoration:none;}
        .demo a:hover{background:white;color:#316ac5;}
        </style>
    </head>
    <body>
        <div class="wrapper">
            <ul class="demo">
                <li><a href="#">1</a></li>
            </ul>
            <ul class="demo">
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
            </ul>
            <ul class="demo">
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
            </ul>
        </div>
    </body>
    </html>

    方法三通过给父层设置浮动和相对定位以及 left:50%,子元素设置相对定位和 left:-50% 来实现水平居中。它可以保留块级元素的功能,而且不会添加无语义标签,不增加嵌套深度,但是设置了相对定位,会带来一定的副作用。

    这三种方法各有优缺点,具体使用哪种方法可以视具体情况而定。

    垂直居中

    1、父层高度不确定的垂直居中

    通过给父层设置相同的上下内边距实现。

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        *{margin:0;padding:0;}
        .demo{width:500px;color:white;margin-bottom:10px;padding-top:20px;padding-bottom:20px;background:black;}
        .content{width:200px;height:50px;background:red;}
        </style>
    </head>
    <body>
        <div class="demo">hello world</div>
        <div class="demo"><img src="cat.jpg" width="248" height="162" alt=""/></div>
        <div class="demo"><div class="content"></div></div>
    </body>
    </html>

    2、父层高度确定的单行文本垂直居中

    通过给父层设置行高来实现,行高和父层高度相同。

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        *{margin:0;padding:0;}
        .demo{width:500px;color:white;background:black;height:100px;line-height:100px;}
        </style>
    </head>
    <body>
        <div class="demo">hello world</div>
    </body>
    </html>

    3、父层高度确定的多行文本、图片、块级元素垂直居中

    方法一:

    说到垂直居中,css 中有个用于垂直居中的属性 vertical-align,但只有在父层为 td 或者 th 时,这个属性才会生效,对于其他块级元素,例如 div、p 等,默认情况是不支持的。在 firefox 和 ie8 下,可以设置块级元素的 display 值为 table-cell,来激活 vertical-align 属性,但 ie6,7 并不支持,所以这种方法没有办法跨浏览器兼容。但是我们可以使用 table。

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        *{margin:0;padding:0;}
        .wrapper{background:black;width:500px;color:white;height:100px;}
        .demo{width:200px;background:red;height:50px;}
        </style>
    </head>
    <body>
        <table>
            <tr>
                <td class="wrapper">
                    hellow world<br/>
                    hellow world<br/>
                    hellow world<br/>
                </td>
            </tr>
        </table>
        <table>
            <tr>
                <td class="wrapper">
                    <img src="cat.jpg" alt=""/>
                </td>
            </tr>
        </table>
        <table>
            <tr>
                <td class="wrapper">
                    <div class="demo"></div>
                </td>
            </tr>
        </table>
    </body>
    </html>

    table 可以很好的实现垂直居中效果,但是它添加了无语义标签,增加了嵌套深度。

    方法二:

    对支持 display:table-cell 的 ie8 和 firefox 用 display:table-cell 和 vertical-align:middle 来实现居中,对不支持 display:table-cell 的 ie6 和 ie7 使用 hack 写法。

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
        *{margin:0;padding:0;}
        .mb{margin-bottom:10px;}
        .wrapper{background:black;width:500px;color:white;height:100px;margin-bottom:10px;display:table-cell;vertical-align:middle;*position:relative;}
        .demo{width:200px;background:red;height:50px;}
        .vam{*position:absolute;*top:50%;}
        .va{*position:relative;*top:-50%;}
        </style>
    </head>
    <body>
        <div class="mb10">
            <div class="wrapper">
                <div class="vam">
                    <div class="va">
                        hellow world<br/>
                        hellow world<br/>
                        hellow world
                    </div>
                </div>
            </div>
        </div>
        <div class="mb10">
            <div class="wrapper">
                <div class="vam">
                    <img src="cat.jpg" alt=""/>
                </div>
            </div>
        </div>
        <div class="mb10">
            <div class="wrapper">
                <div class="vam">
                    <div class="va demo"></div>
                </div>
            </div>
        </div>
    </body>
    </html>

    利用 hack 技术区别对待 firefox、ie8 和 ie6、ie7,在不支持 display:table-cell 的 ie6 和 ie7 下,通过给父子两层元素分别设置 top:50% 和 top:-50% 来实现居中。这种方法的好处是没有增加额外的标签,但缺点也很明显,一方面它使用了 hack,不利于维护,另一方面,它设置了 position:relative 和 position:absolute,带来了副作用。

  • 相关阅读:
    HDU 2116 Has the sum exceeded
    HDU 1233 还是畅通工程
    HDU 1234 开门人和关门人
    HDU 1283 最简单的计算机
    HDU 2552 三足鼎立
    HDU 1202 The calculation of GPA
    HDU 1248 寒冰王座
    HDU 1863 畅通工程
    HDU 1879 继续畅通工程
    颜色对话框CColorDialog,字体对话框CFontDialog使用实例
  • 原文地址:https://www.cnblogs.com/yjzhu/p/2773209.html
Copyright © 2011-2022 走看看