我想对齐一个div和一个div元素内的图像,使它们水平居中。这似乎工作正常,直到我指定img元素的src属性 - 分配一个图像;此时它看起来像这样:对齐div内的元素 - 奇怪的行为
源代码如下(HTML):
<div id="sContainer">
<input id="sBox" type="text" />
<img id="sButton" alt="Search" src="images/searchglass.jpg" />
</div>
和(CSS):
#sContainer
{
background-color:yellow;
float:left;
text-align:center;
width:560px;
}
对于那些有兴趣当图像没有在src属性中获得值时显示alt文本,看起来像这样:
任何人都知道如何解决这个令人讨厌的问题?
编辑:
更多的HTML代码:
<div class="center" id="header">
<div id="leftContainer"></div>
<div id="sContainer">
<input id="sBox" type="text" />
<img id="sButton" alt="Search" src="images/searchglass.jpg" />
</div>
<div id="rightContainer"></div>
</div>
和CSS:
.center
{
clear:both;
margin-left:auto;
margin-right:auto;
width:960px;
}
#header
{
background-color:gray;
height:50px;
}
#rightContainer
{
background-color:red;
float:left;
width:200px;
}
#leftContainer
{
background-color:green;
float:left;
width:200px;
}
#sBox
{
border-bottom-color:black;
border-bottom-style:solid;
border-bottom-width:1px;
border-left-color:black;
border-left-style:solid;
border-left-width:1px;
border-top-color:black;
border-top-style:solid;
border-top-width:1px;
height:18px;
padding:5px;
width:348px;
}
#sContainer
{
background-color:yellow;
float:left;
text-align:center;
width:560px;
}
#searchContainer > *
{
vertical-align:middle;
}
如果将图像浮起,会发生什么情况? – 2012-07-22 20:36:17
它们被正确放置在一起,但它们不再在父div(容器)中水平居中。 – TheBoss 2012-07-22 21:06:17