|
|
|
|
|
|
贊助商
分類(lèi)目錄
贊助商
最新文章
搜索
css實(shí)現(xiàn)div或table居中，文字不居中【Chrome/Firefox/IE測(cè)試通過(guò)】
作者:admin 時(shí)間:2016-10-19 18:35:48 瀏覽:之前設(shè)計(jì)網(wǎng)頁(yè)，如果希望div或table居中，總是用<center></center>把它包起來(lái)，但是這樣的結(jié)果，div或table雖然居中了，但div或table里面的文字也居中了，這是不符合設(shè)計(jì)者意愿的。那么，我們能否用css實(shí)現(xiàn)div或table居中，文字不居中呢？答案是肯定的，本文將給你介紹如何實(shí)現(xiàn)此效果。
css實(shí)現(xiàn)div或table居中 文字不居中
首先，介紹css的寫(xiě)法。
.countainer{
margin:auto;
width:600px;
height:100px;
background-color:#cccccc;
}這里我們要注意一個(gè)關(guān)鍵代碼，就是 margin:auto; ，這個(gè)代碼就是起到可以讓div或table居中，而文字不居中的功效。
了解這個(gè)后，剩下的，就是html中div或table引用此類(lèi) .countainer 了，看看下面的實(shí)例。
div代碼：
<div class="countainer">
div居中, 而里面的文字不居中
</div>
table代碼：
<table class="countainer">
<tr>
<td>table居中, 而里面的文字不居中</td>
</tr>
</table>
div或table使用類(lèi)寫(xiě)法 class="countainer" ，代碼并不復(fù)雜。
最后，附上完整的html代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>讓div+css的div居中, 而里面的文字不居中的做法</title>
<style type="text/css">
.countainer{
margin:auto;
width:600px;
height:100px;
background-color:#cccccc;
}
</style>
</head>
<body>
<div class="countainer">
div居中, 而里面的文字不居中
</div>
<br>
<table class="countainer">
<tr>
<td>table居中, 而里面的文字不居中</td>
</tr>
</table>
</body>
</html>
margin:auto 可以讓所有html元素居中
通過(guò)上述例子，看到 margin:auto 可以讓div或table居中，其實(shí)，它可以讓所有html元件居中，如：<p>、<pre>、<input>等元素。
本文實(shí)例演示及源碼下載
您可能對(duì)以下文章也感興趣
標(biāo)簽: css
相關(guān)文章
- 【2個(gè)實(shí)例】教你怎樣修改和美化blockquote雙引號(hào)及css樣式
- 3個(gè)Blockquote的css樣式【css3實(shí)現(xiàn)】
- 5個(gè)Blockquote的css樣式
- css實(shí)現(xiàn)超出div長(zhǎng)度文字自動(dòng)隱藏或用省略號(hào)表示
- span標(biāo)簽寫(xiě)法問(wèn)題導(dǎo)致ie8 hover失效
- 漂亮實(shí)用的div+css實(shí)現(xiàn)的下拉菜單 已通過(guò)IE、firefox測(cè)試
- css實(shí)現(xiàn)文章每個(gè)段落開(kāi)頭自動(dòng)縮進(jìn)兩個(gè)空格
x
- 站長(zhǎng)推薦
