在一个div里面,其中有文字和图片,现在想要的效果是文字左对齐,图片居中对齐。方法就是把图片变成块级元素来显示就行了。文章目录Html代码:CSS代码:演示地址:

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

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

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

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

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

举例说明:

Html代码: div >CSS代码:.article p{ padding:3px; text-align:left;.article p img{ margin:0 auto; display:block;

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

演示地址: VIEW DEMO