分類:DIV垂直置中 - 部落格 - internet、app、maker - ez2o Studio
如何讓文字或圖片元素在區塊(Div)中置中

在前兩次學習讓區塊<div>內的塊狀元素水平上下置中,這次要來個相對容易的,讓區塊<div>內的單行元素進行水平垂直置中  

【文字、圖片水平置中】→在元素容器中加入text-align:center即可

文字水平置中

【Sample code】

<!--- CSS code --->
<style type='text/css'>
.container {
	background-color:#8D9FB3;
	width:200px;
	height:200px;
	text-align:center;
	}
</style>

<!--- HTML code  --->
<div class="container">
文字水平置中
</div>
<div class="container">
	<img src="http://www.ez2o.com/LIB/ezThumbnail/images/164/1.jpg"/>
</div>

   


  2013-08-28      ez   
如何讓區塊(DIV)在區塊(DIV)中 垂直置中

繼上次成功畫出水平置中之後,這次希望可以嘗試畫出區塊(DIV)在區塊(DIV)中垂直置中(專業速語會說讓塊狀元素中的塊狀元素垂直置中)

要把粉紅色塊垂直置中

 

【塊狀元素置中,容器高度不確定】 =>外層上下設置相同的padding

【Sample code】

<!--- CSS code --->
<style type='text/css'>
.outer {
	width:180px;
	background-color:#CCC;
	border:dashed #FFF 1px;
	padding-bottom:30px;
	padding-top:30px;
	}
.inner {
	width:160px;
	height:140px;
	background-color:#F99;
	}
</style>

<!--- HTML code  --->
<div class="outer">
  <div class="inner"></div>
</div>

→在外層的div設定相同padding-buttom、padding-top高度 → 優點:支援所有的瀏覽器,語法相當簡單 → 缺點:如果容器有固定高度就無法達到效果


  2013-08-28      ez