Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

Change History

Message: [CSS] 一次解決DIV與文字的垂直水平置中/上下左右置中

討論區清單 文章列表
Changed By: JinJin
Change Date: October 22, 2011 05:35PM

[CSS] 一次解決DIV與文字的垂直水平置中/上下左右置中
<div style="border:solid red 3px;position:absolute; height:200px; width:200px;top:50%; left: 50%; margin:-100px 0 0 -100px;line-height:200px; text-align:center;color:red">我是 #content</div>




上下左右置中 CSS 語法：
<pre>#content{
[color=#FF0000]position:absolute;[/color]
height:200px;
width:200px;
[color=#FF0000]top:50%;
left: 50%;
margin:-100px 0 0 -100px;[/color]
}</pre>hanasan/article/35806444nasan/article/35806444
Changed By: JinJin
Change Date: October 22, 2011 05:25PM

用CSS解決div[CSS] 一次解決DIV與文字的垂直水平置中/上下左右置中
<div style="border:solid red 3px;position:absolute; height:200px; width:200px;top:50%; left: 50%; margin:-100px 0 0 -100px;">line-height:200px; text-align:center;color:red">我是 #content</div>




上下左右置中 CSS 語法：
<pre>#content{
[color=#FF0000]position:absolute;[/color]
height:200px;
width:200px;
[color=#FF0000]top:50%;
left: 50%;
margin:-100px 0 0 -100px;[/color]
}</pre>nasan/article/35806444
Changed By: JinJin
Change Date: October 22, 2011 05:17PM

用CSS解決div垂直水平置中/上下左右置中
<div style="border:solid red 13px;position:absolute; height:200px; width:200px;top:50%; left: 50%; margin:-100px 0 0 -100px;"></div>




上下左右置中 CSS 語法：
<pre>#content{
[color=#FF0000]position:absolute;[/color]
height:200px;
width:200px;
[color=#FF0000]top:50%;
left: 50%;
margin:-100px 0 0 -100px;[/color]
}</pre>nasan/article/35806444
Changed By: JinJin
Change Date: October 22, 2011 05:17PM

用CSS解決div垂直水平置中/上下左右置中(CSS Vertical Align)





上下左右置中 CSS 語法：
#content{

  [color=#FF0000]position:absolute;[/color]

  height:200px;

  width:200px;

  [color=#FF0000]top:50%;

  left: 50%;

  margin:-100px 0 0 -100px;[/color]

}
nasan/article/35806444
Changed By: JinJin
Change Date: October 22, 2011 05:16PM





上下左右置中 CSS 語法：
#content{

  [color=#FF0000]position:absolute;[/color]

  height:200px;

  width:200px;

  [color=#FF0000]top:50%;

  left: 50%;

  margin:-100px 0 0 -100px;[/color]

}
nasan/article/35806444
Changed By: JinJin
Change Date: October 22, 2011 05:15PM

用CSS解決div垂直置中/上下置中 置中/上下左右置中(CSS Vertical Align)
<div style="border:solid red 1px;position:absolute; height:200px; width:200px;top:50%; left: 50%; margin:-100px 0 0 -100px;"></div>





上下左右置中 CSS 語法：
<pre>#content{
border:solid red 1px;
 [color=#FF0000]position:absolute;[/color]
height:200px;
width:200px;
[color=#FF0000]top:50%;
left: 50%;
margin:-100px 0 0 -100px;[/color]
}</pre>nasan/article/35806444
Changed By: JinJin
Change Date: October 22, 2011 05:13PM

用CSS解決div垂直置中/上下置中 置中/上下左右置中(CSS Vertical Align)
<div style="border:solid red 1px;position:absolute; height:200px; width:200px;top:50%; left: 50%; margin:-100px 0 0 -100px;"></div>





<pre>#content{
border:solid red 1px;
position:absolute;
 [color=#FF0000]position:absolute;[/color]
 height:200px;
width:200px;
top:50%;
margin-top:-100px;
 [color=#FF0000]top:50%;
left: 50%;
margin:-100px 0 0 -100px;[/color]
}</pre>nasan/article/35806444
Changed By: JinJin
Change Date: October 22, 2011 05:11PM

用CSS解決div垂直置中/上下置中 置中/上下左右置中(CSS Vertical Align)
<div style="border:solid red 1px;position:absolute; height:200px; width:200px;top:50%; left: 50%; margin:-100px auto 00 0 -100px;"></div>





<pre>#content{
border:solid red 1px;
position:absolute;
height:200px;
width:200px;
top:50%;
margin-top:-100px;
}</pre>nasan/article/35806444

Original Message

作者: JinJin
Date: October 22, 2011 05:08PM

用CSS解決div垂直置中/上下置中 置中/上下左右置中(CSS Vertical Align)
 


#content{

  border:solid red 1px;

  position:absolute;

  height:200px;

  width:200px;

  top:50%;

  margin-top:-100px;

}
nasan/article/35806444