當前位置：首頁 - 手機 - 正文

怎樣讓html中的文字垂直水平居中顯示

來源：懂視網(wǎng) 責編：小OO 時間：2020-03-19 16:59:38

導讀我們制作網(wǎng)頁時經(jīng)常會發(fā)現(xiàn)，有些時候文字無法居中顯示，那么我們應該怎樣讓其正好在父級元素的正中央顯示呢？接下來，讓我們一起來了解一下讓html中的文字垂直水平居中顯示的方法吧！方法首先我們打開自己的電腦，找到已經(jīng)安裝好的Dreamweaver，新建一個html頁面，并保存到桌面上。然后我們在html的編輯窗口，編輯元素，使其中顯示若干文字，我是用的div標簽進行布局顯示的。其在瀏覽器中的顯示效果如下圖所示，我們可以很清晰的看到，文字明顯的靠上靠左對齊。接下來我們就需要為文字元素添加一定的對齊方式，...

我們制作網(wǎng)頁時經(jīng)常會發(fā)現(xiàn)，有些時候文字無法居中顯示，那么我們應該怎樣讓其正好在父級元素的正中央顯示呢？接下來，讓我們一起來了解一下讓html中的文字垂直水平居中顯示的方法吧！

方法

首先我們打開自己的電腦，找到已經(jīng)安裝好的Dreamweaver，新建一個html頁面，并保存到桌面上。

然后我們在html的編輯窗口，編輯元素，使其中顯示若干文字，我是用的div標簽進行布局顯示的。

其在瀏覽器中的顯示效果如下圖所示，我們可以很清晰的看到，文字明顯的靠上靠左對齊。

接下來我們就需要為文字元素添加一定的對齊方式，首先我們讓其居中對齊，即使用text-align:center。

使用之后在瀏覽器中進行效果查看，可以很清楚的看到，文字相對于之前靠右對齊了。

我們可以從上一個圖中看到，文字在垂直方向上還是不對齊的，接下來我們就需要為文字添加垂直對齊樣式，line-height，我們需要將這一樣式的大小設為文字外層元素的高度大小，這樣便可正好垂直居中對齊了。

接下來我們刷新瀏覽器中的頁面，查看效果，現(xiàn)在的文字已是垂直水平均居中的狀態(tài)。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

標簽：黃興步行街彩色數(shù)字資產(chǎn)