css中如何設置文本居中

這篇文章主要講解了“css中如何設置文本居中”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“css中如何設置文本居中”吧！

    我們先來看看css單行文本垂直居中

    對于單行文本，我們只需要將文本行高(line-height)和所在區域高度(height)設置一致就可以了。

    css單行文本垂直居中的實現代碼：

    HTML：

    <divid="div1">

    php中文網單行文本垂直居中

    </div>

    CSS：

    #div1{

    width:300px;

    height:100px;

    margin:50pxauto;

    border:1pxsolidred;

    line-height:100px;/*設置line-height與父級元素的height相等*/

    text-align:center;/*設置文本水平居中*/

    overflow:hidden;/*防止內容超出容器或者產生自動換行*/

    }

    css單行文本垂直居中效果如下：

    2345截圖20180919132917.png

    然后再來看看多行文本垂直居中

    說明：多行文本垂直居中分為兩種情況，一個是父級元素高度不固定，隨著內容變化；另一個是父級元素高度固定。

    1、父級元素高度不固定

    父級高度不固定的時，高度只能通過內部文本來撐開。所以，我們可以通過設置內填充（padding）的值來使文本看起來垂直居中，只需設置padding-top和padding-bottom的值相等：

    css多行文本垂直居中代碼：

    HTML：

    <divid="div1">

    php中文網多行文本垂直居中，

    php中文網多行文本垂直居中，

    php中文網多行文本垂直居中，

    php中文網多行文本垂直居中。

    </div>

    CSS：

    #div1{

    width:300px;

    margin:50pxauto;

    border:1pxsolidred;

    text-align:center;/*設置文本水平居中*/

    padding:50px20px;

    }

感謝各位的閱讀，以上就是“css中如何設置文本居中”的內容了，經過本文的學習后，相信大家對css中如何設置文本居中這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！