• 如何让div内的多行文本上下左右居中


      1、首先,如果div中的文本特别少,不超过div宽度,那么这种就非常简单了,直接line-height等于height就可以了

        <style type="text/css">
                #one{
                     200px;
                    height: 200px;
                    line-height: 200px;
                    background: #FF9999;
                    text-align: center;
                }
            </style>
            <div id="one">
                    我是内容
            </div>
    

    2、但是,在文本好多情况下,那么就会出现这种情况

    GG了,如果div不是固定高度,使用padding是可以完美实现

        <style type="text/css">
                #one{
                     200px;
                    padding: 100px 0;
                    background: #FF9999;
                    text-align: center;
                    
                }
            </style>
        </head>
        <body>
                <div id="one">
                    我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
                </div>
        </body>

    3、2的前提是div不是定高的,但是在很多情况下,我们需要的div是需要定高的,

    CSS中的vertical-align属性只会对拥有valign特性的(X)HTML标签起作用,但是在CSS中还有一个display

    属性能够模拟<table>,所以我们可以使用这个属性来让<div>模拟<table>就可以使用vertical-align了。注意,display:table和

    display:table-cell的使用方法,前者必须设置在父元素上,后者必须设置在子元素上,因此我们要为需要定位的文本再增加一个<div>元素:

    <style type="text/css">
    .wrap{
    display: table;
    }
    #one{
    200px;
    height: 200px;
    display: table-cell;
    background: #FF9999;
    text-align: center;
    vertical-align: middle;
    }
    </style>
    </head>
    <body>
    <div class="wrap">
    <div id="one">
    我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
    </div>
    </div>
    </body>

  • 相关阅读:
    负margin实现div的左右排版
    一起来灭掉IE6!
    javac编译多个带package文件
    iis express感觉还不错
    关于sqlite使用entity framework的布署问题
    远程服务器返回了错误 NOTFOUND
    userAgent string detection in javascript
    a crossbroswer solution for parse xml fragment
    event related object in javascript
    several way to implement inheritance in javascript
  • 原文地址:https://www.cnblogs.com/xumqfaith/p/9149497.html
Copyright © 2020-2023  润新知