CSS教學-垂直置中

在寫網頁時常常會遇到該怎麼讓圖片垂直置中

寫網頁時,常會遇到如何讓圖片和文字垂直置中
如果是單純的純文字垂直置中很簡單
只要利用text-alignc和line-height這2個屬性就可以做到
但是圖片的話要怎麼做?
以下就是範例

要在某一個區塊裡,讓裡面的圖片垂直置中
通常我會使用偽元素來製造空白,讓他呈現水平置中
再利用vertical-align: middle這屬性,讓圖片垂直置中

以下是範例:

html範例:
<div class="pic-box">
<div class="pic-img"><img src="../../../images/img/s1.jpg" /></div>
</div>
<div class="word-box">
<div class="">垂直置中</div>
</div>
垂直置中
CSS:
.ex-1-box{
	width: 500px;
	height: 500px;
	margin: 0 auto;
	background-color: #eb6100;
	text-align: center;
}
.ex-1-box:before {
	content: "";
	height: 100%;
	display: inline-block;
	vertical-align: middle;
}
.ex-1 {
	width: 250px;
	margin: 0 auto;
	display: inline-block;
	vertical-align: middle;
}
.ex-1 img{
	width: 100%;
}

如果要在旁邊加上文字,讓文字跟著垂直置中
只要把包圖片的區塊和文字區塊都設定display:inline-block這屬性
讓他們並排,這樣就能達到文字跟著圖片垂直置中的效果
當然,如果你不想讓文字垂直置中的話
可以在CSS設定vertical-align來控制他的位置

也可以利用偽元素加上position的方法
這方法不管圖片的高或寬都會強制置中

使用的CSS

.img { width:500px;
hegth:500px;
position: relative;
font-size: 0;}


設定最外圍的寬高比例和position

.img > span { width: 100%;
height: 100%;
position: absolute;
text-align: center; }
.img > span:before { content: ;
display: inline-block;
height: 100%;
width: 0;
vertical-align: middle; }


用span包起來,並且用偽元素來讓內容物置中

.img > span > img { max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
display: inline-block;
vertical-align: middle; }


img設定為圖片寬高都是100%呈現,並且置中

html範例:
<div class="pic-box">
<div class="pic-img"><img src="../../../images/img/s1.jpg" /></div>
</div>
<div class="word-box">
<div class="">垂直置中</div>
</div>

範例下載