0

別の div 内に 3 つの div があります。

<div id="parentDiv" style="float:right;">
   <div id="childDiv1" style="float:left;">
       <b>Text1</b>
   </div>
   <div id="childDiv2" style="float:left;">
       <img src="smiley.gif" alt="Smiley face" height="42" width="42">
   </div>
   <div id="childDiv3" style="float:left;">
       <input type='checkbox' />
   </div>
<div>

並べて表示する必要があるため、 として設定しましたfloat:left。

問題は、彼らがこのように見えることです...

間違ったレイアウト イメージ

...テキストが上部に垂直に配置されます。私はそれが真ん中にある必要があります。

NB非常によく似た問題に関する投稿を見つけましたが、フローティングが原因で失敗するようです。

4

5 に答える 5

1

本当に DIV が必要な場合は、 floatの代わりに" display: inline; " を使用できます。次に、vertical-align: middle; 要素を中央揃えにします。

    <div id="parentDiv" style=" ">
       <div id="childDiv1" style="display: inline-block; vertical-align: middle;">
           <b>Text1</b>
       </div>
       <div id="childDiv2" style="display: inline-block; vertical-align: middle;">
           <img src="smiley.gif" alt="Smiley face" height="42" width="42">
       </div>
       <div id="childDiv3" style="display: inline-block; vertical-align: middle;">
           <input type='checkbox' />
       </div>
    </div>

お役に立てれば。

于 2013-04-23T13:04:33.593 に答える
0

それらを並べて表示するには、フロートする必要はなく、そのまま設定するだけです。画像については、CSS プロパティを追加するだけvertical-align:middleです。テキストの中央に配置する必要があります。

于 2013-04-23T12:48:41.503 に答える