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 属性に値がなく、代替テキストが表示されている場合にどのように表示されるかに関心がある場合は、次のようになります。

問題の写真

このイライラする問題を解決する方法を知っている人はいますか?

編集：

その他の 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属性がある場合、画像のサイズが大きくなるため、親要素の高さが強制されます。テキスト ボックスと画像をインライン要素として保持する場合は、親の行の高さを画像の高さに調整できます。

#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

imgCSS スタイルを指定してみてください。vertical-alignたとえば、次のようになります。

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

http://jsfiddle.net/QUk5m/

私の提案:

  1. この例でdivは、検索バーと検索ボタンを に配置します。inside-container
  2. 検索バーを左に、検索ボタンを右にフロート
  3. #sContainer内部にフローティング要素があるため、外側のコンテナまたは に高さを与えます
  4. 各要素に高さと幅を与えてください!

明らかに、あなたの高さ/幅、および命名構造により適した私のjsFiddleに変更を加えてください。

于 2012-07-22T21:50:27.940 に答える