支援度最高的垂直置中方式

左圖右文版面的垂直置中應該是最常見到的一種需求了，這種需求的重點在於右側的文字需要垂置對齊於左邊的圖片，這種畫面基本上通常在樣版網站可以說是屢見不鮮了，在我們的專案中也是很常見的一種版面，這種版面的寫法隨便寫的話少說至少也三四種寫法，HTML架構也有多種，以下就用支援度最高且最簡單的寫法來做好了，讓我們先來看一下原始碼

<div class="wrap">
	<img src="https://picsum.photos/300/500?random=1">
	<div class="txt">
		<h2>Amos CSS</h2>
		<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet dolorem velit
           nobis aspernatur fuga neque laudantium soluta necessitatibus? Amet, ab.</p>
	</div>
</div>

*{
	box-sizing:border-box;
}
.wrap{
	width: 600px;
	margin: auto;
}
.wrap img{
	width: 50%;
	vertical-align: middle;
}
.txt{
	display: inline-block;
	width: 50%;
	font-size: 16px;
	vertical-align: middle;
	padding-left: 20px;
}
.txt h2{
	font-size: 42px;
}

範例頁面

上面的做法是利用圖片當作我在鐵人賽第三天寫到的「使用CSS ::before + inline-block 屬性來達到垂直置中」是一樣的觀念，只是這次我把::before改用了圖片來替代，右側的文字則是將它設置為inline-block即可讓兩者支援vertical-align了，所以雖然 Amos 寫了 25種垂直置中的方式，但實際應用時還是需要變化一下觀念啦。

最偷懶的垂直置中方式

好啦，既然知道了支援度最高的垂直置中方式，接下來來看看最偷懶的垂直置中方式，但想當然的! 這種方式的支援度就沒有那麼好了，不多說立刻來看看原始碼吧

<div class="wrap">
	<img src="https://picsum.photos/300/500?random=1">
	<div class="txt">
		<h2>Amos CSS</h2>
		<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet dolorem velit nobis aspernatur fuga neque laudantium soluta necessitatibus? Amet, ab.</p>
	</div>
</div>

*{
	box-sizing:border-box;
}
.wrap{
	width: 600px;
	margin: auto;
	display:flex;
	align-items:center;
	
}
.wrap img{
	width: 50%;
	vertical-align: middle;
}
.txt{
	width: 50%;
	vertical-align: middle;
	padding-left: 20px;
}

範例頁面

經由上面的例子可以看到這種作法其實使用的是我在鐵人賽第七天寫到的 「使用 Flex + align-items 做垂直置中」，使用這種方式的話真的超級偷懶的，套用了 Flex 屬性後的父層，可以針對其第一子層使用align-items做次軸的對齊設定，方式完全使用了 Flex 的特性阿。如果你對於 Flex 還是不熟的話，可以先來看看Amos的「玩轉 CSS FLEX」這場之前的直播，應該可以讓你清楚許多才是，在了解之後也別忘了按讚加訂閱喔。

還有沒有更多圖文垂直置中方式

當然有阿，我一開始就說了隨便寫都有三四種方式，其實原理不難，基本上隨手從我的25種垂直置中方式中挑一種出來應該都可以做到組合技的，就看版面有沒有更多特別的需求了，各位可以盡量的去嘗試看看喔。

立刻訂閱 CSS可樂的網站/頻道享受精彩文章

Line搜尋「@csscoke」加入CSS可樂公開帳號，可以收到 Amos 第一手資訊喔
CSS可樂部落格
CSS coke的Youtube直播頻道
快按此訂閱CSS coke的頻道