返回列表 上一主題 發帖

[分享] DIV 區塊橫向居中

微笑

帖子
23 
主題
21 
精華
0 
積分
51 
點名
0  
作業系統
Win7 
軟體版本
Office 2007 
閱讀權限
20 
性別
男 
註冊時間
2014-3-5 
最後登錄
2014-5-25 
1# 跳轉到 » 倒序看帖
打印
tT
發表於 2014-3-11 21:05 | 只看該作者

[分享] DIV 區塊橫向居中

在IE瀏覽器 body{text-align:center;} 這樣就可以使區塊橫向置中,
但是在Mozilla瀏覽器卻沒有效果,
必須再針對居中層加入 margin-right: auto;margin-left: auto; 例如:


body{text-align: center;}
#divs{margin-right: auto;margin-left: auto;}

<div id="divs" >這是一個相容各瀏覽器的置中區塊</div>


但這樣會連文字都置中了
你可以在為div指定文字對齊方式,例如:
text-align:left; /*文字靠左對齊*/
還有一種更簡單的方式,但是對於IE5/win沒有效果




#divs{margin : 0px auto;}
<div id="divs" >這是一個置中區塊但IE5/Win無法置中</div>
收藏 分享

老夏

帖子
109 
主題
22 
精華
0 
積分
134 
點名
0  
作業系統
Win7 
軟體版本
Office 2000 
閱讀權限
20 
性別
男 
來自
台北市 
註冊時間
2010-5-1 
最後登錄
2023-3-5 

論壇貢獻勳章
2#
發表於 2014-3-16 07:56 | 只看該作者
<div><center>

1234567

</center></div>

TOP

momokt1515

帖子
11 
主題
2 
精華
0 
積分
50 
點名
0  
作業系統
windows 
軟體版本
office2003 
閱讀權限
20 
性別
女 
來自
火星 
註冊時間
2014-8-25 
最後登錄
2015-11-13 
3#
發表於 2015-3-30 11:25 | 只看該作者
目前html5 不支援


<div><center>

1234567

</center></div>

</center>此語法不支援
使用後會影響未來語法上的架構和衝突

更改語法為


<div style="width:100%;">
   <div style="margin: atuo 0;">
        文字版塊皆置中
   </div>
</div>

TOP

老夏

帖子
109 
主題
22 
精華
0 
積分
134 
點名
0  
作業系統
Win7 
軟體版本
Office 2000 
閱讀權限
20 
性別
男 
來自
台北市 
註冊時間
2010-5-1 
最後登錄
2023-3-5 

論壇貢獻勳章
4#
發表於 2015-9-22 02:14 | 只看該作者
<html>

<meta charset=big5">

<body style="margin:0px; overflow:hidden;" bgcolor="#7cd9f1">  

<center>

<div>
<a href="https://www.youtube.com/embed/E0JF5dwRfRQ" target="x" >勝利大遊行在北京</a>
</div>

<iframe width="1920" height="960" src="https://www.youtube.com/embed/TYRuFAJMGZo" name="x"></iframe>

</center>

</body>

</html>

TOP

        靜思自在 : 謊言像一朵盛開的鮮花，外表美麗，生命短暫。
返回列表 上一主題