在各瀏覽器和各分辨率下如何讓div內的table垂直水平居中?


本文主要針對需要全屏顯示的系統頁面內,因為系統經常會用到表格table布局,偶爾的table需要顯示在div的正中間,所以鄙人特此總結下div內table的萬千姿態。

<!DOCTYPE html>
<html>

<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />

<title>i冰冰的個人博客</title>

</head>

<body>
<div style="width:500px;height:500px;background-color:Red;">
<table style="width:100px;height:100px;background-color:Blue;">
<tr>
<td>
喜歡你,始於顏值,陷於才華,忠於人品,痴於肉體,死於不敢主動。
</td>
</tr>
</table>
</div>
</body>

</html>
---------------------------------------

紅色div里有個藍色table,現在table可以水平居中.請問:
如何讓table水平靠右或水平靠左?
如何讓table垂直居中或居上或居下?

---------------------------------------

1.讓table在水平方向上的靠左和靠右
table水平靠左:
<table style="width:100px;height:100px;background-color:Blue;margin:0px auto;" align="left">
table水平靠右:
<table style="width:100px;height:100px;background-color:Blue;margin:0px auto;" align="right">
關於水平靠左靠右可以用:margin:0px auto; align="left" 或者" right";
或者在div里面給這個table定義:div { text-align:right 或者 left}

2.通過DIV控制TABLE--------》這里是正居中

<style type="text/css">
#Frame
{
width:500px;
height:300px;
background-color:#666666;
position:absolute;
left:50%;
top:50%;
margin-left:-250px;
margin-top:-150px;
}
</style>

................
<div id="Frame">
<table>
<table>
<div>
................
見證奇跡的時刻到了,垂直水平居中了有木有??

3.對,你沒看錯,小結如下:

所有的居中都可以用margin來實現,關於水平靠左靠右可以用:margin:0px auto; align="left" 或者" right";
或者在div里面給這個table定義:div { text-align:right 或者 left}

關於table整體垂直居中、靠上、向下,也可以用margin來完成,不過得根據div的高度和table的高度來決定,也就是說高寬都是死的固定值時可以用margin來做計算用。

4.然如果div和table都用的百分比的話呢?

<style type="text/css">
#Frame
{
width:500px;
height:300px;
background-color:#666666;
position:absolute;
left:50%;
top:50%;
margin-left:-50%;
margin-top:-30%; /*此處根據實際的頁面情況去定義*/
}
</style>

................
<div id="Frame">
<table>
<table>
<div>
................

在不固定值的百分比布局頁面內,table也是可以乖乖的正居中在div內的。

看官,請笑納!冰冰奉上……


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM