Div內容居中效果如何實現
- 藏色散人原創
- 2018-11-09 15:53:147327瀏覽
本篇文章主要介紹div內容居中也就是div內容上下左右都居中的效果方法。
對於div內容居中的效果，相信大家都非常熟悉了，例如我們常見的網站導覽列部分。那麼在之前的文章中就給大家介紹過div水平居中以及div垂直居中的實作方法。
推薦學習參考：《HTML教學》
以下繼續介紹給大家div內容居中的效果實作方法。
div內容居中的程式碼範例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Div内容居中</title>
</head>
<body>
<div style="line-height: 200px;margin: 0 auto;text-align: center; width: 200px; background: red;">
PHP中文网
</div>
</body>
</html>前台效果如下圖所示：
如圖顯示，div中內容居中。
這裡我們設定了line-height屬性保證內容垂直居中並設定text-align: center;屬性保證div內容水平居中。
而設定margin: 0 auto;屬性則是為了div能在瀏覽器頁面裡顯示水平居中，當然也可以不設置，如果不設置margin，div內容仍然會居中顯示，如下圖所示：
相關屬性總結：
line-height 屬性設定行間的距離（行高）。
text-align 屬性規定元素中的文字的水平對齊方式，center表示把文字排列到中間。
這篇文章就是關於Div內容居中效果的實作方法介紹，非常簡單易懂了，希望對需要的朋友有所幫助！
以上是Div內容居中效果如何實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：Div垂直居中效果怎麼實現下一篇：Div垂直居中效果怎麼實現