工作中經常會遇到一個圖文的效果，如圖：
再常見不過的效果了，對於下面的文字，一般我們的處理方式是居中，但文字多了會怎麼辦呢？有人會回答“隱藏”；也有人會回答“換行”。
對於“換行”的處理方法我們會遇到一個問題，如果是文字居中，那第二行也會居中，這樣就會造成一種不友好的表現效果。
那麼有沒有一種方法可以針對第一行的文字實現居中，第二行的文字實現居左顯示呢?
請看：
運行代碼 [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd">
<html XMLns="http://www.w3.org/1999/xHtml">
<head>
<meta http-equiv="Content-Type" content="text/Html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title>demo</title>
<link type="text/css" href="http://wkaifang.com/demo/css/reset.CSS" rel="stylesheet" media="screen" />
<style type="text/CSS">
.demo li{display:inline; float:left; width:100px; text-align:center; margin:10px;}
.demo li img{display:block;}
.demo li strong{display:inline-block; text-align:left;}
.demo li strong a{text-align:left;}
</style>
</head>
<body onload="document.execCommand("BackgroundImageCache",false,true)">
<ul class="demo">
<li><a href="#"><img src=/School/UploadFiles_7810/201603/20160324185822913.jpg" width="100" height="75" alt="" /></a><strong><a href="#">我是居中的，我也是居左的</a></strong></li>
<li><a href="#"><img src=/School/UploadFiles_7810/201603/20160324185822847.jpg" width="100" height="75" alt="" /></a><strong><a href="#">我是居中的</a></strong></li>
</ul>
</body>
</Html>
CSS如下：
.demo li{display:inline; float:left; width:100px; text-align:center; margin:10px;}
.demo li img{display:block;}
.demo li strong{display:inline-block; text-align:left;}
.demo li strong a{text-align:left;}
Html如下：
<ul>
<li><a href=”#”><img src=/School/UploadFiles_7810/201603/20160324185822440.jpg” width=”100″ height=”75″ /></a><strong><a href=”#”>我是居中的，我也是居左的</a></strong></li>
<li><a href=”#”><img src=/School/UploadFiles_7810/201603/20160324185822440.jpg” width=”100″ height=”75″ /></a><strong><a href=”#”>我是居中的</a></strong></li>
</ul>
用到的CSS屬性值：inline-block:將對象呈遞為內聯對象，但是對象的內容作為塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內就這樣，完美的圖文居中顯示就做出來了。 是不是很驚奇？事實告訴我們，合理的利用CSS既可實現一些似乎不太可能的效果。