工作中經常會遇到一個圖文的效果，如圖：
再常見不過的效果了，對於下面的文字，一般我們的處理方式是居中，但文字多了會怎麼辦呢？有人會回答“隱藏”；也有人會回答“換行”。
對於“換行”的處理方法我們會遇到一個問題，如果是文字居中，那第二行也會居中，這樣就會造成一種不友好的表現效果。
那麼有沒有一種方法可以針對第一行的文字實現居中，第二行的文字實現居左顯示呢?
請看：
運行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
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=”url/img.jpg” width=”100″ height=”75″ /></a><strong><a href=”#”>我是居中的，我也是居左的</a></strong></li>
<li><a href=”#”><img src=”url/img.jpg” width=”100″ height=”75″ /></a><strong><a href=”#”>我是居中的</a></strong></li>
</ul>
用到的CSS屬性值：inline-block:將對象呈遞為內聯對象，但是對象的內容作為塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內就這樣，完美的圖文居中顯示就做出來了。 是不是很驚奇？事實告訴我們，合理的利用CSS既可實現一些似乎不太可能的效果。