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

作者佚名技术来源 CSS技术浏览发布时间 2012-02-02

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://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

上一页 1 2

分享到：更多

你可能对下面的文章感兴趣

上一篇: CSS制作网页实例:改变滚动条的样式下一篇: css复合选择器:使用css的类名交集复合选择器

关于网页图文混排教程:图文居中显示的所有评论