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

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

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

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

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

请看：

运行代码框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <title>demo</title> <link type="text/css" href="http://wkaifang.com/demo/css/reset.css" rel="stylesheet" media="screen" /> <style type="text/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;} </style> </head> <body onload="document.execCommand(''BackgroundImageCache'',false,true)"> <ul class="demo"> <li><a href="#"><img src="http://www.blueidea.com/articleimg/2011/03/8308/11.jpg" width="100" height="75" alt="" /></a><strong><a href="#">我是居中的，我也是居左的</a></strong></li> <li><a href="#"><img src="http://www.blueidea.com/articleimg/2011/03/8308/12.jpg" width="100" height="75" alt="" /></a><strong><a href="#">我是居中的</a></strong></li> </ul> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

1 2 下一页

分享到：更多

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

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

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

随机推荐