Как я могу вертикально выровнять мой div внутри другого div и держать их бок о бок?

Question

У меня есть три divs внутри другого 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.

Беда в том, что они появляются, как это ...

... с текстом вертикально сверху. Мне нужно, чтобы это было посередине.

N.B. Я нашел сообщение о very similar issue, но кажется, что плавающий заставляет его потерпеть неудачу.

Answer 1

Если вам действительно нужно DIVs, вы можете использовать «дисплей: встроенный;» вместо float. А затем вертикально-выровненный: средний; чтобы сделать элементы в центре.

<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> 

Надеюсь, что это поможет.

Answer 2

Для того, чтобы они казались бок о бок, вам не нужно их плавать, просто установите их такими, какими они есть. Что касается изображения, просто добавьте для него свойство CSS: vertical-align:middle, и это должно выровнять его в середине текста.

Answer 3

«высота линии» всех элементов внутри всех «DIV» должен быть равен

Answer 4

Вы можете добиться того, что легко с таблицами

 <table> 
      <tr> 
       <td> <b>Text1</b></td> 
       <td><img src="smiley.gif" alt="Smiley face" height="42" width="42"></td> 
       <td><input type='checkbox' /></td> 
      </tr> 
     </table> 

Или вам действительно нужно придерживаться дивы? Надеюсь это поможет. :)

Answer 5

Используйте следующий код: (я советую вам избегать таблицы как можно больше)

<div id="parentDiv" style="float:right;"> 
    <div id="childDiv1" style="float:left; line-height: 42px;"> 
     <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; line-height: 42px;"> 
     <input type='checkbox' /> 
    </div> 
<div>