如何讓div內的多行文本上下左右居中

時間 2019-12-13

標籤如何 div 行文本上左右居中欄目 CSS 简体版

原文原文鏈接

　　一、首先，若是div中的文本特別少，不超過div寬度，那麼這種就很是簡單了，直接line-height等於height就能夠了css

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

二、可是，在文本好多狀況下，那麼就會出現這種狀況性能

GG了，若是div不是固定高度，使用padding是能夠完美實現spa

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

三、2的前提是div不是定高的，可是在不少狀況下，咱們須要的div是須要定高的，3d

CSS中的vertical-align屬性只會對擁有valign特性的(X)HTML標籤起做用，可是在CSS中還有一個displaycode

屬性可以模擬<table>，因此咱們能夠使用這個屬性來讓<div>模擬<table>就能夠使用vertical-align了。注意，display:table和blog

display:table-cell的使用方法，前者必須設置在父元素上，後者必須設置在子元素上，所以咱們要爲須要定位的文本再增長一個<div>元素：table