如何在不破坏垂直对齐的情况下定位DIV？ [英] How to position DIV without destroying the vertical alignment?
问题描述
我已经为此苦苦挣扎了好几个小时，却找不到解决方案。我做了一个简单的布局，以显示两对仪表和温度计的可视化图像，以显示ESP8266上传的温度。基本布局是：
I've been struggling with this for hours and cannot find the solution. I've made a simple layout to display two pairs of gauge+thermometer visualizations to show the temperatures uploaded by ESP8266. The basic layout is:
<!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垂直对齐。
When <div class="below_gauge2"> is removed from the HTML the layout is exactly how I would like it to be. However, after adding that DIV, the green div moves up so it is not anymore vertically aligned with the second green div at the right.
该怎么做< div class = below_gauge2> 会显示在左侧绿色DIV下方，但以这种方式，绿色DIV会保留在添加<$ c $之前的位置c>< div class = below_gauge2> ？
What can be done so <div class="below_gauge2"> would be displayed below the left green DIV, but in a such way the green DIV would stay where it was before adding the <div class="below_gauge2">?
推荐答案
选中此小提琴
#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;
}
这篇关于如何在不破坏垂直对齐的情况下定位DIV？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
