0

我正在尝试在 div 元素中对齐 div 和图像,以使它们水平居中。在我指定 img 元素的 src 属性之前,这似乎可以正常工作 - 为其分配图像;此时它看起来像这样:

问题图片

源代码如下(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;
}
4

3 回答 3

1

当图像具有有效src属性时,它会获得尺寸,因此会强制其父元素的高度。如果要将文本框和图像保留为内联元素,可以将父级的 line-height 调整为图像高度:

#sContainer
{
    background-color:yellow;
    float:left; // btw, does this need to be floated?
    text-align:center;
    width:560px;
    line-height: 30px;
}

但是,这不会在所有浏览器中一致地呈现,因为默认情况下,这些元素与基线垂直对齐。您希望将 的所有子元素垂直对齐#sContainer到顶部或中间。

#sContainer > *
{
    vertical-align: middle;
}
于 2012-07-22T20:49:10.367 回答
0

http://jsfiddle.net/QUk5m/

我的建议:

  1. 将搜索栏和搜索按钮放在一个 中,在本例中div调用inside-container
  2. 将搜索栏浮动到左侧,将搜索按钮浮动到右侧
  3. 给外部容器,或者#sContainer,一个高度,因为里面有浮动元素
  4. 给每个元素一个高度和宽度!

显然,对我的 jsFiddle 进行更改,使其更适合您的高度/宽度和命名结构。

于 2012-07-22T21:50:27.940 回答
0

尝试给您imgvertical-aligncss 样式,例如:

#sContainer img
{
    vertical-align: -4px;
}
于 2012-07-22T20:38:03.193 回答