如何在不破坏垂直对齐的情况下定位DIV？

debugcn 发表于 Dev

Chupo_cro

我已经为此苦苦挣扎了好几个小时，却找不到解决方案。我做了一个简单的布局，以显示两对仪表和温度计的可视化图像，以显示ESP8266上载的温度。基本布局是：

<!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">？之前的位置。

GvM

检查这个小提琴

#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;
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。