css中設置div居中顯示的方法

我們進行頁面開發的時候 , 最經常用的就是div標簽了 , 那么div中的內容如何居中顯示呢 , 下面小編給大家分享一下 。 東西/材料 Sublime Text
操作方式 01 起首我們用sublime先建立一個html , 而且在html里面插手div , 如下圖所示

css中設置div居中顯示的方法



02 【css中設置div居中顯示的方法】然后我們在div中插手一些文字 , 如下圖所示 , 文字用span包裹起來

css中設置div居中顯示的方法



03 運行頁面法式今后我們會看到文字在div的左上角 , 并沒有居中的結果 , 如下圖所示

css中設置div居中顯示的方法



04 接下來我們就需要用CSS給div中的內容設置居中了 , 如下圖所示 , 經由過程text-align和line-height實現

css中設置div居中顯示的方法



05 最后運行界面法式 , 我們看到div中的內容此次程度和垂直都居中了 , 如下圖所示

css中設置div居中顯示的方法





以上內容就是css中設置div居中顯示的方法的內容啦 , 希望對你有所幫助哦!

    猜你喜歡