图片文字居中显示;网页图文混排版教程

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

　　再常见不过的效果了，对于下面的文字，一般我们的处理方式是居中，但文字多了会怎么办呢?有人会回答“隐藏”;也有人会回答“换行”。

　　对于“换行”的处理方法我们会遇到一个问题，如果是文字居中，那第二行也会居中，这样就会造成一种不友好的表现效果。

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

　　请看：

　　运行代码框

<!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 全部选择提示：你可先修改部分代码，再按运行]

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

搜索

热门标签

图片文字居中显示;网页图文混排版教程