在写一个图文混排的css，关于图片居中，突然懵了，求助

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 4134 天前的主题，其中的信息可能已经有所发展或是发生改变。

<div id="abc">
<p>这里是文字</p>
<p><img src="http://cdn.v2ex.com/site/[email protected]?m=1346064962" /></p>
<p>这里是文字</p>
</div>

我知道 #abc {text-align:center;}可以让图片居中，但是文字也会相应的居中。

我只要图片居中，文字靠左。

这里我不想使用<p style="align=center">（图片有N张，岂不要加N个style="align=center"）

只想使用CSS使图片居中，貌似margin:0 auto;也没用(图片width大小不一，没法固定死width)

居中

图片

CENTER

17 条回复 • 1970-01-01 08:00:00 +08:00

ong

2013-01-07 16:49:17 +08:00

<div id="abc">
<p>这里是文字</p>
<p class="img"><img src="http://cdn.v2ex.com/site/[email protected]?m=1346064962" /></p>
<p>这里是文字</p>
</div>

#abc p.img{text-align:center;}

yeshang

2013-01-07 16:53:55 +08:00

@ong <p class="img">这里我知道，我不想每次都加 class="img"

cutehalo

2013-01-07 16:54:20 +08:00

#abc p.img{
margin: 0 auto;
display: block;
}
ls的得加在p标签上才可以居中

cutehalo

2013-01-07 16:54:57 +08:00

- -打错了
#abc p.img——>#abc p img

nervouna

2013-01-07 16:59:12 +08:00

p>img {...}

yeshang

2013-01-07 22:35:36 +08:00

@nervouna 请问这个>是什么意思

yeshang

2013-01-07 22:37:16 +08:00

@cutehalo 多加了一个display: block;的确是可以的，非常感谢。

liuhang0077

2013-01-07 22:38:46 +08:00

每次看到楼主的头像我就觉得好熟悉。。。

yeshang

2013-01-07 23:11:05 +08:00

@liuhang0077 我用了你贴出来的图，做了头像

liyandong

2013-01-07 23:30:33 +08:00

@yeshang 转换成块干嘛啊

yeshang

2013-01-07 23:57:57 +08:00

@liyandong 只为了图片居中。请问你有什么好方法没

nervouna

2013-01-08 00:29:26 +08:00

@yeshang 选择所有父元素为 <p> 的 <img> 标签，你可以给它加上居中的样式，同时不影响页面上其它的 <img> 标签。

yeshang

2013-01-08 09:06:27 +08:00

@nervouna 我只懂的吗，关键是居中的样式怎么写

nervouna

2013-01-08 11:38:21 +08:00

@yeshang 没看懂你要说什么。

liyandong

2013-01-08 13:10:42 +08:00 via Android

p>img吧

underone

2013-01-08 14:13:03 +08:00

#abc img {
margin: auto;
padding: 0px;
float: none;
text-align: center;
display: block;
}

#abc p 无需样式

yeshang

2013-01-08 17:14:30 +08:00

@underone 感谢你。可以用