怎樣讓html中的文字垂直水平居中顯示
我們製作網頁時經常會發現,有些時候文字無法居中顯示,那麼我們應該怎樣讓其正好在父級元素的正中央顯示呢?接下來,讓我們一起來了解一下讓html中的文字垂直水平居中顯示的方法吧!
方法
首先我們打開自己的電腦,找到已經安裝好的Dreamweaver,新建一個html頁面,並保存到桌面上。
然後我們在html的編輯窗口,編輯元素,使其中顯示若干文字,我是用的div標籤進行佈局顯示的。
其在瀏覽器中的顯示效果如下圖所示,我們可以很清晰的看到,文字明顯的靠上靠左對齊。
接下來我們就需要爲文字元素添加一定的對齊方式,首先我們讓其居中對齊,即使用text-align:center。
使用之後在瀏覽器中進行效果查看,可以很清楚的看到,文字相對於之前靠右對齊了。
我們可以從上一個圖中看到,文字在垂直方向上還是不對齊的,接下來我們就需要爲文字添加垂直對齊樣式,line-height,我們需要將這一樣式的大小設爲文字外層元素的高度大小,這樣便可正好垂直居中對齊了。
接下來我們刷新瀏覽器中的頁面,查看效果,現在的文字已是垂直水平均居中的狀態。