css教程之div文字图片混合型下图片居中

来源:互联网  时间:2018-01-03    阅读:   我要吐槽    阿里云幸运券

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

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

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

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

举例说明:

Html代码:

  1. <div class="article"> 
  2. <p>免费资源网 - 免费教程,免费软件,免费字体,免费主机,免费域名_Freexyz.cn</p> 
  3. <p>http://www.freexyz.cn/</p> 
  4. <p><img src="http://www.freexyz.cn/images/v1/logo.png" alt="" title="" /></p> 
  5. </div> 

CSS代码:

  1. .article p{ 
  2.     padding:3px
  3.     text-align:left
  4. .article p img{ 
  5.     margin:0 auto
  6.     display:block

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

Tags:混合型  图片居中  文字  css  

参与讨论