首頁 > web前端 > html教學 > CSS DIV 固定宽度居中的方法

CSS DIV 固定宽度居中的方法

WBOY
發布: 2016-06-01 09:53:18
原創
2445 人瀏覽過

DIV布局水平居中,关键使用CSS单词为margin:0 auto。
解释:DIV对象外边距左右为自动适应距离(根据对象设置宽度样式自动判断浏览器除去设置宽度后剩下宽度左右自动对等自然就实现布局居中),上下间距为0px。

关键实例CSS代码:

<code class="language-css">body{ text-align:center} 
.box{ margin:0 auto; width:500px; height:100px; border:1px solid #00F} </code>
登入後複製

首先对body设置个css内容居中,当然也是为了兼容各大浏览器默认情况下内容为居中初始设置,如何再对需要居中的选择器设置布局居中(margin:0 auto),固定宽度设置为500px,高度100px,CSS边框为1px蓝色实线边框。

这里设置500px宽度是任意设置,实际布局中根据需求设置,为了看到DIV被居中布局,所以加入高度和边框,以便观察到固定宽度居中实例效果。

实例:

<code class="language-html"> 
 
 
<meta charset="utf-8"> 
<title>CSS DIV 固定宽度居中的方法</title> 
<style> 
body{ text-align:center} 
.box{ margin:0 auto; width:500px; height:80px; border:1px solid #00F} 
</style> 
 
 
<div class="box">CSS DIV 固定宽度居中的方法</div> 
 
 </code>
登入後複製

在线运行

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板