|
工作中经常会遇到一个图文的效果，如图：
再常见不过的效果了，对于下面的文字，一般我们的处理方式是居中，但文字多了会怎么办呢？有人会回答“隐藏”；也有人会回答“换行”。
对于“换行”的处理方法我们会遇到一个问题，如果是文字居中，那第二行也会居中，这样就会造成一种不友好的表现效果。
那么有没有一种方法可以针对第一行的文字实现居中，第二行的文字实现居左显示呢?
请看：
运行代码框
[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既可实现一些似乎不太可能的效果。
经典论坛交流：
http://bbs.blueidea.com/thread-2980021-1-1.html
本文链接：http://www.blueidea.com/tech/web/2011/8308.asp 
出处：蓝色理想
责任编辑：bluehearts
◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。
|
