居中父母Div內的兩個子Div Div

我知道這已經被詳細討論過了，但我似乎無法找到解決此問題的答案。這是一個簡單的例子來說明我的問題。我在父母div內有兩個子女div，我希望他們在父母div內水平居中。這裏是小提琴：居中父母Div內的兩個子Div Div

#container { 
 
    position: relative; 
 
    float: none; 
 
    margin: 0 auto; 
 
    border: solid blue 1px; 
 
    width: 100%; 
 
} 
 

 
.tile { 
 
    width: 20em; 
 
    height: 40em; 
 
    border:solid black 1px; 
 
    display: inline-block; 
 
    margin: 1.5em auto; 
 
}

<div id="container"> 
 
    <div class="tile"> 
 
    <!-- 
 
    When you remove this comment, the div shifts down and I do not understand what is causing that. 
 
    <h3>This Title Moves the div down. Why?</h3>--> 
 
    </div> 
 
    <div class="tile"></div> 
 
</div>

現在是沒有辦法，我很想念一個簡單的解決方案？此外，我還有一個關於h3標籤的第二個問題。當h3標籤周圍的評論被刪除時，第一個div向下移動。 h3標籤怎麼樣導致div下移，我該如何防止它發生？

感謝您的回答和您的幫助，對於潛在的重複問題，我表示抱歉。

來源

2017-08-03 prestondoris

添加以下代碼#container：

display: flex; 
justify-content: center; 
align-items: center;

直播片段

#container { 
 
    position: relative; 
 
    float: none; 
 
    margin: 0 auto; 
 
    border: solid blue 1px; 
 
    width: 100%; 
 

 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.tile { 
 
    width: 20em; 
 
    height: 40em; 
 
    border:solid black 1px; 
 
    display: inline-block; 
 
    margin: 1.5em 0; 
 
}

<div id="container"> 
 
    <div class="tile"> 
 
    <!-- 
 
    When you remove this comment, the div shifts down and I do not understand what is causing that. 
 
    <h3>This Title Moves the div down. Why?</h3>--> 
 
    </div> 
 
    <div class="tile"></div> 
 
</div>

來源

2017-08-03 05:13:39 cypark

謝謝!!這很奇妙！你能簡單地解釋一下這個CSS實際上在做什麼嗎？我讀了另一篇文章，提到了顯示器：flex，但是當我查看它時，它似乎不是我想要的。我想我應該更深入地閱讀它。再次感謝你的幫助！ – prestondoris

不客氣！ 'justify-content'和'align-items'定義了瀏覽器如何在元素之間分配空間，但是justify-content控制水平對齊，而align-items控制垂直對齊。有關更多信息，請查看[justify-content]（https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content）和[align-items]（https：//developer.mozilla。來自MDN的org/en-US/docs/Web/CSS/align-items）。 – cypark

所以我對這個例子進行了擴展，並在父'div'內添加了更多'div's，並且子'div'元素保持在同一行，並且只需在同一行內縮小寬度以適應父項。我假設這是因爲父'div'的'flex'正在告訴孩子「適應」內部。我是否正確理解這一點？ – prestondoris

當您使用默認display:inline-block是vertical-align: bottom;，這樣一套的CSS .tile到vertical-align: middle;和text-align:center到#container

.tile { 
    width: 20em; 
    height: 40em; 
    border:solid black 1px; 
    display: inline-block; 
    margin: 1.5em auto; 
    vertical-align: middle; 
}

工作代碼：https://jsfiddle.net/e8on1cko/5/

來源

2017-08-03 05:06:00

您可以到.tile和text-align:center添加margin:auto到#container

#container { 
 
    position: relative; 
 
    float: none; 
 
    margin: 0 auto; 
 
    border: solid blue 1px; 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 

 
.tile { 
 
    width: 20em; 
 
    height: 40em; 
 
    border:solid black 1px; 
 
    display: inline-block; 
 
    margin: auto; 
 
}

<div id="container"> 
 
    <div class="tile"> 
 
    <h3>This Title Moves the div down. Why?</h3> 
 
    </div> 
 
    <div class="tile"></div> 
 
</div>

來源

2017-08-03 05:06:08 Dij

謝謝！這和以下關於顯示的評論一樣有效：flex。你能解釋爲什麼這些CSS的工作是爲了實現這個目的嗎？我試圖更好地理解，以避免將來出現這樣的簡單問題。 – prestondoris

'text-align'指定元素內的水平對齊，所以它放在'＃容器'的中間。所以這個作品 – Dij

您可以添加：.title {display：block; }

#container { 
 
    position: relative; 
 
    float: none; 
 
    margin: 0 auto; 
 
    border: solid blue 1px; 
 
    width: 100%; 
 
    
 
} 
 

 
.tile { 
 
    border: 1px solid black; 
 
    display: block; 
 
    height: 40em; 
 
    margin: 1.5em auto; 
 
    width: 20em; 
 
    text-align:justify; 
 
    padding:7px; 
 
} 
 

 
h3 { 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div id="container"> 
 
    <div class="tile"> 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
 
    </div> 
 
    <div class="tile"> 
 
    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. 
 
    </div> 
 
</div>

來源

2017-08-03 05:24:49

我應該指定我希望孩子的div是內聯的。這就是爲什麼我把內聯塊列爲顯示。我已閱讀其他帖子，可能會導致問題。 – prestondoris

` `

#container { 
 
     padding:25%; 
 
     text-align:center; 
 
     background:#e7e7e7; 
 
    } 
 
    
 
.tile{ 
 
     background:white; 
 
     display:inline-block; 
 
     padding:20%; 
 
    }

<div id="container"> 
 
    <div class="tile"> 
 
    <h3>This Title Moves the div down. Why?</h3> 
 
    </div> 
 
    <div class="tile"></div> 
 
</div>

來源

2017-08-03 05:27:53 Santosh

居中父母Div內的兩個子Div Div

回答

相關問題