div文字图片混合型下图片居中

对于图片居中的问题，网上有很多很多方法，图片居中又分水平居中和垂直居中。之前有文章：DIV中让图片水平、垂直居中、使一个层垂直居中于浏览器。

最近有童鞋问我，在一个div里面，其中有文字和图片，现在想要的效果是文字左对齐，图片居中对齐。然后说对图片定义text-align:center;无效。

我说这里用text-align:center;肯定没有效果的，text-align是文字对齐属性，你用图片上肯定是无效的。

那么我们如何实现上述效果呢？

其实也不是复杂的事情，我可以变通一下，把图片变成块级元素来显示就行了。

举例说明：

Html代码：

<div class="article">
<p>威言威语</p>
<p>https://www.weisay.com</p>
<p><img src="/blog/ico/css.gif" alt="" title="" /></p>
</div>

CSS代码：

.article p{
	padding:3px;
	text-align:left;
}
.article p img{
	margin:0 auto;
	display:block;
}

当然其中的text-align:left;是可以不写，默认就是居左对齐。

演示地址：