Вертикальное выравнивание тегов h2 внутри нескольких divs

Question

У меня есть родительский div и несколько дочерних div внутри. Я бы хотел, чтобы вершина каждого тега h2 была одинаковой. Теперь это не так.

<div style="width: 10000em; margin-left: -5000em; position: relative; left: 50%; text-align: center;"> 
    <div style="display:inline-block;vertical-align:middle"> 
    <div style="float:left;top:0"><h2>L2</h2></div> 
    gdgsdgsgsgsgs<br>gsgsgsgsdgsg<br>gsdgdsgdsgdsgd 
    </div> 

    <div style="display:inline-block;vertical-align:middle"> 
    <div style="float:left:top:0"><h2>R1</h2></div> 
    gdgsdgsgsgsgs<br>gsgsgsgsdgsg 
    </div> 

    <div style="display:inline-block;vertical-align:middle"> 
    <div style="float:left:top:0"><h2>W1</h2></div> 
    gdgsdgsgsgsgs 
    </div> 
</div> 

Answer 1

Пожалуйста, проверьте код. Я только что изменил style="float:left:top:0px"

до style="float:left;top:0px". Вы пропустили ;точка с запятой. и я добавил ваш контент в другом <div>.

<div style="width: 10000em; margin-left: -5000em; position: relative; left: 50%; text-align: center;"> 
 
    <div style="display:inline-block;vertical-align:middle"> 
 
    <div style="float:left;top:0px"><h2>L2</h2></div> 
 
    <div style="height:50px;">gdgsdgsgsgsgs<br>gsgsgsgsdgsg<br>gsdgdsgdsgdsgd</div> 
 
    </div> 
 

 
    <div style="display:inline-block;vertical-align:middle"> 
 
    <div style="float:left;top:0px"><h2>R1</h2></div> 
 
    <div style="height:50px;">gdgsdgsgsgsgs<br>gsgsgsgsdgsg</div> 
 
    </div> 
 

 
    <div style="display:inline-block;vertical-align:middle"> 
 
    <div style="float:left;top:0px"><h2>W1</h2></div> 
 
    <div style="height:50px;">gdgsdgsgsgsgs</div> 
 
    </div> 
 
</div>

Answer 2

Настройка ваших встроенных блоков для vertical-align:top; будет решить эту проблему для вас. Кроме того, я хотел бы указать, что вы дали двоеточие (:) вместо точки с запятой между встроенными css-свойствами div внутри встроенных блоков. Таким образом, окончательный код должен выглядеть следующим образом:

<div style="width: 10000em; margin-left: -5000em; position: relative; left: 50%; text-align: center;"> 
    <div style="display:inline-block;vertical-align:top"> 
     <div style="float:left;top:0"> 
      <h2>L2</h2> 
     </div> 
     gdgsdgsgsgsgs<br>gsgsgsgsdgsg<br>gsdgdsgdsgdsgd 
    </div> 
    <div style="display:inline-block;vertical-align:top"> 
     <div style="float:left;top:0"> 
      <h2>R1</h2> 
     </div> 
     gdgsdgsgsgsgs<br>gsgsgsgsdgsg 
    </div> 
    <div style="display:inline-block;vertical-align:top"> 
     <div style="float:left;top:0"> 
      <h2>W1</h2> 
     </div> 
     gdgsdgsgsgsgs 
    </div> 
</div> 

Answer 3

лучший способ сделать это состоит в использовании дисплея прогибается и гибкий стиль в родительском DIV

<div style="display: flex; align-items: baseline; justify-content:center; width: 100%;"> 
 
    <div style="display:inline-block;vertical-align:middle; padding: 16px;"> 
 
    <div style="float:left:top:0"> 
 
     <h2>L2</h2> 
 
    </div> 
 
    gdgsdgsgsgsgs 
 
    <br>gsgsgsgsdgsg 
 
    <br>gsdgdsgdsgdsgd 
 
    </div> 
 

 
    <div style="display:inline-block;vertical-align:middle; padding: 16px;"> 
 
    <div style="float:left:top:0"> 
 
     <h2>R1</h2> 
 
    </div> 
 
    gdgsdgsgsgsgs 
 
    <br>gsgsgsgsdgsg 
 
    </div> 
 

 
    <div style="display:inline-block;vertical-align:middle, padding: 16px;"> 
 
    <div style="float:left:top:0"> 
 
     <h2>W1</h2> 
 
    </div> 
 
    gdgsdgsgsgsgs 
 
    </div> 
 
</div>

Answer 4

Если вы используете flex и изготовить h2 и текстовые контейнеры, margin следует окончательно закрепить его:

body> div, 
 
body > div > div { 
 
    display:flex; 
 
} 
 
body> div { 
 
    justify-content:center; 
 
} 
 
body > div > div { 
 
    padding:0 1em; 
 
    flex-flow:column; 
 
} 
 
body > div > div > h2 { 
 
    margin:0; 
 
    text-align:center 
 
} 
 
body > div > div > div { 
 
    margin:auto; 
 
}

<div> 
 
    <div> 
 
    <h2>L2</h2> 
 
    <div>gdgsdgsgsgsgs<br>gsgsgsgsdgsg<br>gsdgdsgdsgdsgd</div> 
 
    </div> 
 
    <div> 
 
    <h2>R1</h2> 
 
    <div>gdgsdgsgsgsgs<br>gsgsgsgsdgsg</div> 
 
    </div> 
 
    <div> 
 
    <h2>W1</h2> 
 
    <div> 
 
     gdgsdgsgsgsgs</div> 
 
    </div> 
 
</div>

код под моим минималистичный пример:

body> div, 
 
body > div > div { 
 
    display:flex; 
 
} 
 
body> div { 
 
    justify-content:center; 
 
    text-align:center 
 
} 
 
body > div > div { 
 
    padding: 1em 0.125em; 
 
    flex-flow:column; 
 
} 
 
body > div > div > h2 { 
 
    margin:0 0 0.75em; 
 
} 
 
body > div > div > div { 
 
    margin:auto; 
 
} 
 
h2 { 
 
    background:lightblue 
 
} 
 
h1 { 
 
    font-size:1rem; 
 
    color:tomato; 
 
    margin:0; 
 
    text-align:center;

<h1>minimalistic flex layout version </h1> 
 
<div> 
 
    <div> 
 
    <h2>L2</h2> 
 
    <div>gdgsdgsgsgsgs 
 
     <br>gsgsgsgsdgsg 
 
     <br>gsdgdsgdsgdsgd</div> 
 
    </div> 
 
    <div> 
 
    <h2>R1</h2> 
 
    <div>gdgsdgsgsgsgs 
 
     <br>gsgsgsgsdgsg</div> 
 
    </div> 
 
    <div> 
 
    <h2>W1</h2> 
 
    <div> 
 
     gdgsdgsgsgsgs</div> 
 
    </div> 
 
</div> 
 
<hr/> 
 
<h1>below your code </h1> 
 
<section> 
 
    <div style="width: 10000em; margin-left: -5000em; position: relative; left: 50%; text-align: center;"> 
 
    <div style="display:inline-block;vertical-align:middle"> 
 
     <div style="float:left:topleft;top:0"> 
 
     <h2>L2</h2> 
 
     </div> 
 
     gdgsdgsgsgsgs 
 
     <br>gsgsgsgsdgsg 
 
     <br>gsdgdsgdsgdsgd 
 
    </div> 
 

 
    <div style="display:inline-block;vertical-align:middle"> 
 
     <div style="float:left:top:0"> 
 
     <h2>R1</h2> 
 
     </div> 
 
     gdgsdgsgsgsgs 
 
     <br>gsgsgsgsdgsg 
 
    </div> 
 

 
    <div style="display:inline-block;vertical-align:middle"> 
 
     <div style="float:left:top:0"> 
 
     <h2>W1</h2> 
 
     </div> 
 
     gdgsdgsgsgsgs 
 
    </div> 
 
    </div> 
 
</section>