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

William2011-09-11 02:49设计18,062次浏览32条评论

扫一扫手机看

文章目录隐藏

Html代码：
CSS代码：
演示地址：

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

演示地址：

VIEW DEMO

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

17楼
huli：

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

2012-03-16 15:30 回复
- William博主：
  
  @huliSyntaxHighlighter Evolved
  
  2012-03-16 16:00 回复
16楼
Monarch：

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

2011-10-13 13:36 回复
- William博主：
  
  @Monarch最近比较忙，手上有项目要做。
  
  2011-10-13 16:15 回复
15楼
wmtimes：

嗯。说的就是。

2011-09-28 21:55 回复
14楼
魏星博客：

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

2011-09-16 09:01 回复
- William博主：
  
  @魏星博客哈哈，这个还是需要的
  
  2011-09-16 21:04 回复
13楼
Nunki：

有用

2011-09-13 21:02 回复
- William博主：
  
  @Nunki哈哈，没有用我也不写了
  
  2011-09-13 21:20 回复
12楼
我爱pc：

浅显易懂，学习了！

2011-09-12 19:33 回复
- William博主：
  
  @我爱pc用最简单的代码做最全的事情~
  
  2011-09-13 20:58 回复
11楼
evil：

学习了，占个位子先~~~

2011-09-12 14:33 回复
- William博主：
  
  @evil互相学习~
  
  2011-09-13 20:59 回复
10楼
集趣：

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

2011-09-12 14:03 回复
- William博主：
  
  @集趣哈哈，还有什么好方法么~
  
  2011-09-13 20:57 回复
9楼
kita：

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

2011-09-11 23:20 回复
- William博主：
  
  @kitamargin: 0 auto，一般对层居中用的比较多，所以把图片变成类似div的块级元素来居中。
  
  2011-09-13 20:57 回复
8楼
木本无心：

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

2011-09-11 21:11 回复
- William博主：
  
  @木本无心你谦虚了，我知道你CSS也厉害的
  
  2011-09-13 20:54 回复
7楼
毕扬：

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

2011-09-11 19:29 回复
- William博主：
  
  @毕扬以后就不会了，哈哈
  
  2011-09-13 20:53 回复
6楼
毕扬：

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

2011-09-11 19:24 回复
5楼
雅岚：

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

2011-09-11 14:25 回复
- William博主：
  
  @雅岚哈哈，这个方法是最简单实用的
  
  2011-09-13 20:53 回复
4楼
雅岚：

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

2011-09-11 14:24 回复
地板
锐品创意：

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

2011-09-11 14:07 回复
- William博主：
  
  @锐品创意貌似现在已经正常显示了~
  
  2011-09-13 20:52 回复
板凳
三人帮：

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

2011-09-11 11:37 回复
- William博主：
  
  @三人帮我倒是觉得CSS是做好学的
  
  2011-09-13 20:52 回复
- 林肆：
  
  @三人帮CSS比编程语言是要简单的，这是很肯定的事情。
  
  2011-10-19 07:59 回复
沙发
qiuyili：

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

2011-09-11 09:56 回复
- William博主：
  
  @qiuyili我认真啊，哈哈
  
  2011-09-13 20:52 回复