在網頁設計的過程中,有時候可能為了佈局美觀可能需要讓文字居中,那麼,怎麼設定文字居中呢?本篇文章將為大家介紹關於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單行文字垂直居中效果如下:
#然後再來看看多行文字垂直居中
說明:多行文字垂直居中分為兩種情況,一個是父級元素高度不固定,隨著內容變化;另一個是父級元素高度固定。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多行文字垂直置中效果如下:
#2、父級元素高度固定
css中的vertical-align屬性,它只對擁有valign特性的元素才生效,結合display: table;,可以使得div模擬table屬性。因此我們可以設定父級div的display屬性:display: table;;然後再增加一個div包含文字內容,設定其display:table-cell;和vertical-align:middle。 css多行文字垂直居中程式碼:<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多行文字垂直居中效果如下: #這篇文章到這裡就結束了,其實還有其他方法就不一一介紹了,更多精彩可以關注php中文網。
以上是css中怎麼設定文字居中? css文字垂直居中的設定方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!