当前位置: 首页 > 设计 > 正文
avatar

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

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

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

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

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

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

举例说明:

Html代码:
<div class="article">
<p>威言威语 | 我愿像茶一样,把苦涩留在心里,敬发出来的都是清香!</p>
<p>http://www.weisay.com</p>
<p><img src="http://www.weisay.com/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;是可以不写,默认就是居左对齐。

演示地址:
本文固定链接: http://www.weisay.com/blog/div-css-pic-center.html | 威言威语

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

  1. avatar
    17楼
    huli Google Chrome Windows

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

    2012-03-16 15:30 [回复]
    • avatar
      William Google Chrome Windows

      SyntaxHighlighter Evolved

      2012-03-16 16:00 [回复]
  2. avatar
    16楼
    Monarch Google Chrome Windows

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

    2011-10-13 13:36 [回复]
    • avatar
      William Safari iPhone

      最近比较忙,手上有项目要做。

      2011-10-13 16:15 [回复]
  3. avatar
    15楼
    wmtimes Google Chrome Windows

    嗯。说的就是。

    2011-09-28 21:55 [回复]
  4. avatar
    14楼
    魏星博客 Google Chrome Windows

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

    2011-09-16 09:01 [回复]
    • avatar
      William Safari iPhone

      哈哈,这个还是需要的

      2011-09-16 21:04 [回复]
  5. avatar
    13楼
    Nunki Mozilla Firefox Windows

    :smile: 有用

    2011-09-13 21:02 [回复]
    • avatar
      William Google Chrome Windows

      哈哈,没有用我也不写了 :wink:

      2011-09-13 21:20 [回复]
  6. avatar
    12楼
    我爱pc Internet Explorer Windows

    浅显易懂,学习了!

    2011-09-12 19:33 [回复]
    • avatar
      William Google Chrome Windows

      用最简单的代码做最全的事情~ :wink:

      2011-09-13 20:58 [回复]
  7. avatar
    11楼
    evil Mozilla Firefox Windows

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

    2011-09-12 14:33 [回复]
  8. avatar
    10楼
    集趣 Google Chrome Windows

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

    2011-09-12 14:03 [回复]
    • avatar
      William Google Chrome Windows

      哈哈,还有什么好方法么~

      2011-09-13 20:57 [回复]
  9. avatar
    9楼
    kita Google Chrome Mac OS

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

    2011-09-11 23:20 [回复]
    • avatar
      William Google Chrome Windows

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

      2011-09-13 20:57 [回复]
  10. avatar
    8楼
    木本无心 Google Chrome Windows

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

    2011-09-11 21:11 [回复]
    • avatar
      William Google Chrome Windows

      你谦虚了,我知道你CSS也厉害的

      2011-09-13 20:54 [回复]
  11. avatar
    7楼
    毕扬 Google Chrome Windows

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

    2011-09-11 19:29 [回复]
    • avatar
      William Google Chrome Windows

      以后就不会了,哈哈

      2011-09-13 20:53 [回复]
  12. avatar
    6楼
    毕扬 Google Chrome Windows

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

    2011-09-11 19:24 [回复]
  13. avatar
    5楼
    雅岚 Mozilla Firefox Windows

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

    2011-09-11 14:25 [回复]
    • avatar
      William Google Chrome Windows

      哈哈,这个方法是最简单实用的 :lol:

      2011-09-13 20:53 [回复]
  14. avatar
    4楼
    雅岚 Mozilla Firefox Windows

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

    2011-09-11 14:24 [回复]
  15. avatar
    地板
    锐品创意 Internet Explorer Windows

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

    2011-09-11 14:07 [回复]
    • avatar
      William Google Chrome Windows

      貌似现在已经正常显示了~

      2011-09-13 20:52 [回复]
  16. avatar
    板凳
    三人帮 Google Chrome Windows

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

    2011-09-11 11:37 [回复]
    • avatar
      William Google Chrome Windows

      我倒是觉得CSS是做好学的 :wink:

      2011-09-13 20:52 [回复]
    • avatar
      林肆 Internet Explorer Windows

      CSS比编程语言是要简单的,这是很肯定的事情。

      2011-10-19 07:59 [回复]
  17. avatar
    沙发
    qiuyili Internet Explorer Windows

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

    2011-09-11 09:56 [回复]

发表评论

question razz sad smile redface biggrin surprised eek confused cool lol mad rolleyes wink neutral cry

快捷键:Ctrl+Enter