幾個div內h2標籤的垂直對齊

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;就能解決問題爲您服務。另外，我想指出的是，您已經在內聯塊內的div的內聯css屬性之間給出冒號（:)而不是分號。所以，最終的代碼應該如下：

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