css布局中的置中問題

來源:互聯網
上載者:User
css|問題

如何使DIV置中

主要的樣式定義如下:

body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

說明:

首先在父級元素定義TEXT-ALIGN: center;這個的意思就是在父級元素內的內容置中;對於IE這樣設定就已經可以了。但在mozilla中不能置中。解決辦法就是在子項目定義時候設定時再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”

需要說明的是,如果你想用這個方法使整個頁面要置中,建議不要套在一個DIV裡,你可以依次拆出多個div,只要在每個拆出的div裡定義MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

如何使圖片在DIV 中垂直置中

用背景的方法。舉例:

body{BACKGROUND: url(logo_w3cn_194x79.gif) #FFF no-repeat center;}

關鍵就是最後的center,這個參數定義圖片的位置。還可以寫成“top left”(左上方)或者"bottom right"等,也可以直接寫數值"50 30"

效果如下:

如何使文本在DIV中垂直置中

如果是文字,便不能用背景方法,可以用增高行距的辦法變通實現垂直置中,完整代碼如下:

<html>
<head>
<style>
body{TEXT-ALIGN: center;}
#center{ MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
height:200px;
background:#F00;
width:400px;
vertical-align:middle;
line-height:200px;
}
</style>
</head>
<body>
<div id="center"><p>test content</p></div>
</body>
</html>

說明:

vertical-align:middle;表示行內垂直置中,我們將行距增加到和整個DIV一樣高line-height:200px;然後插入文字,就垂直置中了。



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。