2014
10
20

div水平、垂直置中

關鍵字:div水平、垂直置中

在網頁製作中,常常會遇到需要圖片水平、垂直置中的情況,
水平置中還算簡單,但垂直置中就麻煩得多了!
垂直置中的解法其實也不少,但常常都會讓階層變得很多,
像以前也常用的display:table-cell;的做法,就需要在區塊外面多包一層。

在這邊分享一個最近得知,覺得方便很多的方法!
假設我們要把img在div裡置中:

HTML:
<div><img></div>

CSS:
div { position:relative; }
div img { position:absolute; top:0; right:0; left:0; bottom:0; margin:auto; }

只要把img定位在div裡,然後四邊的定位都為0,最後加上margin:auto;就可以讓圖片置中啦!
是不是很簡單,不用在包來包去的多方便!


如果不是很理解,下面提供範例讓大家參考:



HTML設定:
<div id="actBox">
<div class="actPic">
<img src="active_detail_pic_00.jpg" width="240" height="150" border="0">
</div>
<div class="actTitle">2014/05/05 標題標題</div>
<div class="actContent">內容內容內容內容。內容內容內容內容內容內容內容內容內容內容內容內容。內容內容內容內容...</div>
</div>

CSS設定:
#actBox {
width:270px;
border-top:#95877b 8px solid;
border-left:#95877b 1px solid;
border-right:#95877b 1px solid;
border-bottom:#95877b 1px solid;
}

/*--圖片置中效果在這邊--*/
.actPic {
background-color:#d8d0cc;
border-bottom:#95877b 1px solid;
text-align:center;
width:270px;
height:180px;

position:relative;
}

.actPic img {
position:absolute;
top:0;
right:0;
left:0;
bottom:0;
margin:auto;
}
/*--END-圖片置中效果在這邊--*/

/*--日期標題--*/
.actTitle {
display:block;
color:#89613d;
font-size:16px;
text-decoration:none;
height:36px;
line-height:36px;
overflow:hidden;
padding:0 10px;
border-bottom:#95877b 1px solid;
}

/*--內文--*/
.actContent {
display:block;
color:#4d4d4d;
font-size:14px;
text-decoration:none;
height:56px;
overflow:hidden;
padding:10px;
}
傑立資訊傑立資訊事業有限公司

電話:(02)2739-9096 | 傳真:(02)2739-6637 | 客服:service@julyinfo.com | 臺北市大安區和平東路3段257號6樓map

© 2016 傑立資訊 All rights reserved.法律顧問:宇恒法律事務所