2014-10-02 58 views
0

我有一个div意味着包含所说的网站上的所有内容,我嵌入到div的图像不想居中,我不知道为什么?我怎样才能将我的图像对齐到div中?

这里是CSS。

#wrapper { 
width: 1000px; 
margin: 0 auto; 
background-color: #f4f9f1; 
} 

#intro { 
padding-bottom: 10px; 
width:80%; 
margin:10px auto; 
border-bottom: 3px solid #b32230; 
} 

前奏的ID给说IMG,它只是浮​​到div的左边(ID是包装),即使我有左,右页边距设置为auto,并不会心?

+0

添加文本对齐:中心为包装 – Devin 2014-10-02 19:21:12

+2

如果你想要的任何其他信息,你应该看看这个CSS-诀窍万物中心的文章。 http://css-tricks.com/centering-css-complete-guide/ – 2014-10-02 19:24:10

回答

2

margin: auto;的问题是,它只会中心块级元素......和img是默认显示为inline并遵循文本流(向左)。如果添加display: block它它应该工作:

DEMO

#intro { 
    display: block; 
    padding-bottom: 10px; 
    width:80%; 
    margin:10px auto; 
    border-bottom: 3px solid #b32230; 
} 

这样你就不需要集中对准包装元素的文本。

但是,如果你想居中包装的所有inline孩子 - 只是在#wrapper使用text-align:center ...但是,那么你可能需要有前行的休息时间和图像后或一些文字可能会在下一个结束他们,将它们赶出中心=)

DEMO

+0

谢谢,它工作:) – Conroy 2014-10-02 21:07:15

0

使用text-align: center在主容器:

#wrapper { 
    width: 1000px; 
    margin: 0 auto; 
    background-color: #f4f9f1; 
    text-align: center;/*Add text-align center*/ 
} 
+0

或显示图像作为一个块,取决于OP的需求 – 2014-10-02 19:30:51