|
工作中經(jīng)常會(huì)遇到一個(gè)圖文的效果，如圖：
再常見不過的效果了，對(duì)于下面的文字，一般我們的處理方式是居中，但文字多了會(huì)怎么辦呢？有人會(huì)回答“隱藏”；也有人會(huì)回答“換行”。
對(duì)于“換行”的處理方法我們會(huì)遇到一個(gè)問題，如果是文字居中，那第二行也會(huì)居中，這樣就會(huì)造成一種不友好的表現(xiàn)效果。
那么有沒有一種方法可以針對(duì)第一行的文字實(shí)現(xiàn)居中，第二行的文字實(shí)現(xiàn)居左顯示呢?
請(qǐng)看：
運(yùn)行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
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:將對(duì)象呈遞為內(nèi)聯(lián)對(duì)象，但是對(duì)象的內(nèi)容作為塊對(duì)象呈遞。旁邊的內(nèi)聯(lián)對(duì)象會(huì)被呈遞在同一行內(nèi)
就這樣，完美的圖文居中顯示就做出來了。 是不是很驚奇？事實(shí)告訴我們，合理的利用CSS既可實(shí)現(xiàn)一些似乎不太可能的效果。
經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2980021-1-1.html
本文鏈接：http://m.95time.cn/tech/web/2011/8308.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
