威言威语
我愿像茶,苦涩留心,清香予人。
威言威语
当前位置: 首页 > 设计 > 正文

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

在一个div里面,其中有文字和图片,现在想要的效果是文字左对齐,图片居中对齐。方法就是把图片变成块级元素来显示就行了。

目录
文章目录隐藏
  1. Html代码:
  2. CSS代码:
  3. 演示地址:

对于图片居中的问题,网上有很多很多方法,图片居中又分水平居中和垂直居中。之前有文章: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;是可以不写,默认就是居左对齐。

演示地址:

您可能还会对这些文章感兴趣!

div文字图片混合型下图片居中:目前有 32 条评论

  1. 17楼
    huli:Google Chrome 13.0.782.107 Windows XP

    请问这篇文章内的代码插件是什么呢?

    2012-03-16 15:30 回复
  2. 16楼
    Monarch:Google Chrome 14.0.835.186 Windows XP

    来学习了。呵呵。要更新哇

    2011-10-13 13:36 回复
  3. 15楼

    嗯。说的就是。

    2011-09-28 21:55 回复
  4. 14楼

    几天没来,跟新好几篇文章了,看来以后还是得常来学习!

    2011-09-16 09:01 回复
  5. 13楼
    NunkiFirefox 6.0.2 Windows 7

    :smile: 有用

    2011-09-13 21:02 回复
  6. 12楼

    浅显易懂,学习了!

    2011-09-12 19:33 回复
  7. 11楼
    evilFirefox 6.0.2 Windows XP

    :wink: 学习了,占个位子先~~~

    2011-09-12 14:33 回复
  8. 10楼
    集趣Google Chrome 13.0.782.215 Windows 7

    之前我也被这个问题纠结过,但最后还是很好的解决了~

    2011-09-12 14:03 回复
  9. 9楼
    kitaGoogle Chrome 13.0.782.220 Mac OS X  10.7.1

    這個讓kita想起了以前用過的版面居中,也是有margin: 0 auto;

    2011-09-11 23:20 回复
    • WilliamGoogle Chrome 13.0.782.220 Windows 7

      @kitamargin: 0 auto,一般对层居中用的比较多,所以把图片变成类似div的块级元素来居中。

      2011-09-13 20:57 回复
  10. 8楼

    我会想到margin:0 auto;但不会想到display:block;,哈哈,学习了。

    2011-09-11 21:11 回复
  11. 7楼
    毕扬Google Chrome 13.0.782.55 Windows 7

    这个问题在之前的几个主题已经困扰我很久了

    2011-09-11 19:29 回复
  12. 6楼
    毕扬Google Chrome 13.0.782.55 Windows 7

    这个问题当初困扰我好长时间

    2011-09-11 19:24 回复
  13. 5楼
    雅岚Firefox 5.0.1 Windows XP

    哦,仔细看了下,就是你说的了。。。

    2011-09-11 14:25 回复
  14. 4楼
    雅岚Firefox 5.0.1 Windows XP

    没有啊,我那边可以这样设定,让图片居中的嘛。。
    p.s
    上次在瓶子提到威威的黑白主题,岚女就想过来围观一下,结果。。哈哈。。简洁的导航页挺有意思,嘿嘿

    2011-09-11 14:24 回复
  15. 地板

    威兄 请教一下哦~为什么我的网站WP升级后头像不显示了呢 ~什么原因~~

    2011-09-11 14:07 回复
  16. 板凳

    有时候觉得 CSS比 编程语言如C#啥的难学

    2011-09-11 11:37 回复
  17. 沙发

    早上3点多跑过来一看,竟然新发表了一篇日志,凌晨了还在写文章,真有你的~~

    2011-09-11 09:56 回复

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

question razz sad smile redface biggrin shock confused cool lol mad rolleyes wink cry