|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
css實現(xiàn)div或table居中，文字不居中【Chrome/Firefox/IE測試通過】
作者:admin 時間:2016-10-19 18:35:48 瀏覽:之前設(shè)計網(wǎng)頁，如果希望div或table居中，總是用<center></center>把它包起來，但是這樣的結(jié)果，div或table雖然居中了，但div或table里面的文字也居中了，這是不符合設(shè)計者意愿的。那么，我們能否用css實現(xiàn)div或table居中，文字不居中呢？答案是肯定的，本文將給你介紹如何實現(xiàn)此效果。
css實現(xiàn)div或table居中 文字不居中
首先，介紹css的寫法。
.countainer{
margin:auto;
width:600px;
height:100px;
background-color:#cccccc;
}這里我們要注意一個關(guān)鍵代碼，就是 margin:auto; ，這個代碼就是起到可以讓div或table居中，而文字不居中的功效。
了解這個后，剩下的，就是html中div或table引用此類 .countainer 了，看看下面的實例。
div代碼：
<div class="countainer">
div居中, 而里面的文字不居中
</div>
table代碼：
<table class="countainer">
<tr>
<td>table居中, 而里面的文字不居中</td>
</tr>
</table>
div或table使用類寫法 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元素居中
通過上述例子，看到 margin:auto 可以讓div或table居中，其實，它可以讓所有html元件居中，如：<p>、<pre>、<input>等元素。
本文實例演示及源碼下載
您可能對以下文章也感興趣
標(biāo)簽: css
相關(guān)文章
x
- 站長推薦
