如何讓文字或圖片元素在區塊(Div)中置中 如何讓文字或圖片元素在區塊(Div)中置中
      ez      2013-08-28

在前兩次學習讓區塊<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>

   

【單行文字垂直置中】→設定line-height等於容器高度

文字水平置中

  【Sample code】

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

<!--- HTML code  --->
<div class="container">
文字水平置
</div>

   

【圖片、多行文字垂直置中Demo】

圖片跟多行文字垂直置中跟讓區塊(DIV)在區塊(DIV)中 垂直置中是一樣的方式,這邊就選擇使用相容度最高而且相當容易使用的空<div>法   【Sample code】

<!--- CSS code --->
<style type='text/css'>
.container_div {
	background-color:#CCC;
	width:200px;
	height:200px;
	}

.empty_div {
	float:left;
	height:50%; /*父元素高度的50%*/
	margin-bottom:-65px;/*置中元素高度的一半*/
	*width::1px; /*only for IE7*/
	}
.content_div {
	clear:both; /*清除浮動*/
	height:130px;
	position:relative
	}

</style>

<!--- HTML code  --->
<div class="container_div">
	<div class="empty_div">
    </div>
    <div class="content_div">
    <img src="http://www.ez2o.com/LIB/ezThumbnail/images/164/1.jpg" />
    </div>
</div>
<div class="container_div">
	<div class="empty_div">
    </div>
    <div class="content_div">
    這行應該要居中
    </div>
</div>

詳細請參考 如何讓區塊(DIV)在區塊(DIV)中 垂直置中


標籤:   CSS、  DIV垂直置中、  DIV置中、  HTML、  前端入門、  前端幼幼班

我要留言