수직 정렬을 손상시키지 않으면 서 DIV를 배치하는 방법은 무엇입니까?

저는 몇 시간 동안이 문제로 어려움을 겪었으므로 해결책을 찾지 못했습니다. ESP8266에 업로드 된 온도를 보여주기 위해 2 쌍의 게이지 + 온도계 시각화를 표시하는 간단한 레이아웃을 만들었습니다. 기본 레이아웃은 다음과 같습니다 <div class="below_gauge2">가 HTML에서 제거 레이아웃이 나는 그것이 싶습니다 정확히 어떻게입니다수직 정렬을 손상시키지 않으면 서 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를 추가하면 녹색 div가 위로 이동하여 더 이상 오른쪽의 두 번째 녹색 div와 수직으로 정렬되지 않습니다.

그래서 <div class="below_gauge2"> 수행 할 수 있습니다 왼쪽 녹색 DIV 아래에 표시 될 수 있지만,이 <div class="below_gauge2">를 추가하기 전에이었다 녹색 DIV 머물 것 등의 방법으로 무엇

출처

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

정확히 무엇을하려고 했습니까, 대단히 감사합니다! 이제는 그 이유가 이해 될 수만 있다면 - #/안드로이드가 position 속성을 relative로 설정해야하는 이유와 절대 위치에있을 때'.below gauge2'의 원점을 계산하는 이유를 설명해 주시겠습니까? BTW, 이전에 코드에 'margin : 0 auto;'이 있었기 때문에 마지막 줄을 넣지 않아도되었습니다. –

'position : relative;'를'# inner'에 추가하여'position : absolute; '를 가진'.below_gauge2'가'# container'가 아닌 상대적인 위치가되도록했습니다. 절대 위치 - 요소는 첫 번째로 배치 된 (정적이 아닌) 조상 요소를 기준으로 배치됩니다. – GvM

이제'position : relative; '를'# inner'에 추가해야만했던 이유를 이해하지만'position : absolute;'가 div를 왼쪽 위 모서리로 옮기지 않는 이유를 여전히 이해하지 못합니다 # 내부 '와 어떻게'왼쪽 : 0; 오른쪽 : 0;'결과가'# 안쪽 '에 수평으로 가운데에 맞춰집니다. 그리고 왜'position : relative'가없는'# inner'는 문서 컨테이너가 아닌'# container'에 상대적입니까? –

수직 정렬을 손상시키지 않으면 서 DIV를 배치하는 방법은 무엇입니까?

답변

관련 문제