如何定位DIV而不破壞垂直對齊？

我一直在掙扎幾個小時，並找不到解決方案。我做了一個簡單的佈局來顯示兩對量表+溫度計可視化圖，以顯示ESP8266上傳的溫度。基本佈局是：如何定位DIV而不破壞垂直對齊？

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>The title</title> 
    <link href="style.css" rel="stylesheet" type="text/css" /> 
</head> 

<body> 
    <div id="container_main"> 
    <div id="heading"><h1>The title</h1></div> 
    <div class="graph"> 
     <div id="container"> 
     <div id="inner"> 
      <div id="gauge_div"></div> 
      <div class="below_gauge">Text #1</div> 
      <div class="below_gauge2">Here I would like to display some text but would not like the left square to be misaligned with the right one.</div> 
     </div> 
     <div id="thermometer"> 
      <canvas id="termometar_cnv" width="160" height="600"></canvas> 
     </div> 
     <div id="inner2"> 
      <div id="gauge2_div"></div> 
      <div class="below_gauge">Text #2</div> 
     </div> 
     <div id="thermometer2"> 
      <canvas id="termometar2_cnv" width="160" height="600"></canvas> 
     </div> 
     </div> 
     <div id="below">Description. 
     </div> 
    </div> 
    </div> 
</body> 
</html>

body { 
    background-color: #ddd; 
} 
h1 { 
    color: #FFFFFF; 
    background-color: #0000FF; 
    padding: 5px; 
} 
#container { 
    height: 100%; 
    width: 100%; 
    display: table; 
} 
#inner { 
    vertical-align: middle; 
    display: table-cell; 
} 
#inner2 { 
    vertical-align: middle; 
    display: table-cell; 
} 
#gauge_div { 
    width: 240px; 
    height: 240px; 
    margin: 0 auto; 
    background-color: green; 
} 
#gauge2_div { 
    width: 240px; 
    height: 240px; 
    margin: 0 auto; 
    background-color: green; 
} 
#heading { 
    width: 100%; 
    margin: 0 auto; 
    text-align: center; 
    color: blue; 
} 
#below { 
    margin: 0 20px; 
    text-align: center; 
    color: blue; 
} 
.graph { 
    margin: 0 auto; 
    padding: 10px 0; 
    text-align: center; 
    color: blue; 
    border: thin solid #00F; 
} 
#container_main { 
    padding-right: 100px; 
    padding-left: 100px; 
} 
#thermometer { 
    margin: 0 auto; 
    padding: 10px 0px 10px 0; 
    background-color: gray; 
} 
#thermometer2 { 
    margin: 0 auto; 
    padding: 10px 20px 10px 0; 
    background-color: gray; 
} 
.below_gauge { 
    font-weight: bold; 
    color: blue; 
} 
.below_gauge2 { 
    width: 240px; 
    margin: 0 auto; 
    color: blue; 
}

當<div class="below_gauge2">從HTML刪除佈局正是我想的那樣。但是，在添加DIV後，綠色div向上移動，因此不再與右側的第二個綠色div對齊。

什麼可以做這樣<div class="below_gauge2">將顯示下方左側綠色DIV，但在這樣的方式綠色DIV會留在它加入<div class="below_gauge2">過嗎？

來源

2016-12-01 Chupo_cro

創建的只是發佈您的代碼片段來代替。 – connexo

檢查這個fiddle

#inner { 
    vertical-align: middle; 
    display: table-cell; 

    //added 
    position: relative; 
} 

.below_gauge2 { 
    width: 240px; 
    margin: 0 auto; 
    color: blue; 

    //added 
    position: absolute; 
    left: 0; 
    right: 0; 
    margin: auto; 
}

來源

2016-12-01 02:32:17 GvM

正是我想要做的，非常感謝你！現在，如果我只能理解爲什麼這會起作用： - /請問你能解釋爲什麼'＃inner'必須將位置屬性設置爲相對值，以及絕對定位時計算'.below gauge2'的原點是如何計算的？順便說一句，我沒有必要把最後一行，因爲在代碼中已經有'margin：0 auto;'。 –

我增加了'position：relative;'到'＃inner'，這樣'.below_gauge2'與'position：absolute;'是相對的，而不是'＃容器'。絕對位置 - 該元素相對於其第一個定位的（不是靜態的）祖先元素進行定位。 – GvM

我現在明白了爲什麼你不得不將'position：relative;'添加到'＃inner'，但仍不明白爲什麼'position：absolute;'不會將div移動到'＃的左上角'內在'和如何'左：0; right：0;'在'＃inner'裏面水平居中的結果。爲什麼'＃inner'沒有'position：relative'是相對於'＃容器'而不是文檔主體？ –

如何定位DIV而不破壞垂直對齊？

回答

相關問題