网页图文混排教程:图文居中显示


工作中经常会遇到一个图文的效果,如图:

再常见不过的效果了,对于下面的文字,一般我们的处理方式是居中,但文字多了会怎么办呢?有人会回答“隐藏”;也有人会回答“换行”。
对于“换行”的处理方法我们会遇到一个问题,如果是文字居中,那第二行也会居中,这样就会造成一种不友好的表现效果。

那么有没有一种方法可以针对第一行的文字实现居中,第二行的文字实现居左显示呢?

请看:

运行代码框

[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既可实现一些似乎不太可能的效果。


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3