首頁  >  文章  >  web前端  >  css中怎麼設定文字居中? css文字垂直居中的設定方法

css中怎麼設定文字居中? css文字垂直居中的設定方法

不言
不言原創
2018-09-19 13:42:3743947瀏覽

在網頁設計的過程中,有時候可能為了佈局美觀可能需要讓文字居中,那麼,怎麼設定文字居中呢?本篇文章將為大家介紹關於css設定文字垂直居中的方法。

首先我們要知道透過css實作元素的水平居中較為簡單:對文本,只需要對其父級元素設定text-align: center,對div等區塊級元素,只需要設定其left和right的margin值為auto;要實現元素的垂直居中,有人會想到css中的vertical-align屬性,但是它只對擁有valign特性的元素才生效。所以接下來我們就來看看css實作單文本垂直居中和多文本垂直居中的實作方法。

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

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

css單行文字垂直居中的實作碼:

HTML:

<div id="div1">
        php中文网单行文本垂直居中
    </div>

CSS##

 #div1{
            width: 300px;
            height: 100px;
            margin: 50px auto;
            border: 1px solid red;
            line-height: 100px; /*设置line-height与父级元素的height相等*/
            text-align: center; /*设置文本水平居中*/
            overflow: hidden; /*防止内容超出容器或者产生自动换行*/
        }

css單行文字垂直居中效果如下:

css中怎麼設定文字居中? css文字垂直居中的設定方法

#然後再來看看多行文字垂直居中

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

1、父級元素高度不固定

父級高度不固定的時,高度只能透過內部文字來撐開。所以,我們可以透過設定內填(padding)的值來讓文字看起來垂直居中,只需設定padding-top和padding-bottom的值相等:

css多行文字垂直居中程式碼:

HTML:

  <div id="div1">
            php中文网多行文本垂直居中,
            php中文网多行文本垂直居中,
            php中文网多行文本垂直居中,
            php中文网多行文本垂直居中。
    </div>

CSS:

  #div1{
            width: 300px;
            margin: 50px auto;
            border: 1px solid red;
            text-align: center; /*设置文本水平居中*/
            padding: 50px 20px;
        }

css多行文字垂直置中效果如下:

css中怎麼設定文字居中? css文字垂直居中的設定方法

#2、父級元素高度固定

css中的vertical-align屬性,它只對擁有valign特性的元素才生效,結合display: table;,可以使得div模擬table屬性。因此我們可以設定父級div的display屬性:display: table;;然後再增加一個div包含文字內容,設定其display:table-cell;和vertical-align:middle。

css多行文字垂直居中程式碼:


#HTML:

<div id="outer">
        <div id="middle">
            php中文网固定高度多行文本垂直居中,
            php中文网固定高度多行文本垂直居中,
            php中文网固定高度多行文本垂直居中,
            php中文网固定高度多行文本垂直居中。
        </div>
    </div>

CSS:


#outer{
            width: 400px;
            height: 200px;
            margin: 50px auto;
            border: 1px solid red;
            display: table;
        }
        #middle{ 
            display:table-cell; 
            vertical-align:middle;  
            text-align: center; /*设置文本水平居中*/  
            width:100%;   
        }

css多行文字垂直居中效果如下:

css中怎麼設定文字居中? css文字垂直居中的設定方法

#這篇文章到這裡就結束了,其實還有其他方法就不一一介紹了,更多精彩可以關注php中文網。


以上是css中怎麼設定文字居中? css文字垂直居中的設定方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn