div中的垂直中心元素

嘿，我是新來的編碼，這是我的困境。我不知道如何在div中垂直居中元素，顯然這是一個常見問題，因爲沒有一個簡單的類來執行該功能。因此，我環顧了幾個方法，並提出了以下解決方案，以便將容器div中的文本居中。div中的垂直中心元素

CodePen：

的HTML：

<div class="container" id="tryone"> 
<div id="trytwo"> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ita relinquet duas, de quibus etiam atque etiam consideret. Atque his de rebus et splendida est eorum et illustris oratio. Claudii libidini, qui tum erat summo ne imperio, dederetur. Eam si varietatem diceres, intellegerem, ut etiam non dicente te intellego; Sint ista Graecorum; Duo Reges: constructio interrete. Piso igitur hoc modo, vir optimus tuique, ut scis, amantissimus. At iam decimum annum in spelunca iacet. Sapientem locupletat ipsa natura, cuius divitias Epicurus parabiles esse docuit. Qui-vere falsone, quaerere mittimus-dicitur oculis se privasse;</p> 
</div> 
<img src="http://res.cloudinary.com/dqoqzoncd/image/upload/v1474214059/YzW4rUu_f69vph.jpg" alt="Manuel Martin" id="smaller-image"> 
</div>

的CSS：

#tryone{ 
    max-width:1000px; 

} 

#trytwo{ 
    top: 50%; 
    max-width: 550px; 
    float: left; 
    margin-top: 45px; 
}

這只是增加了邊距的文字股利。唯一的問題是代碼看起來不太靈活。如果我想改變我最終想要的文本的大小，容器將不平衡，除非我更改margin-top :.是否有解決方案，使文本更改不會使容器不平衡。

來源

2016-09-18 manuel

Google是你的朋友... https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/ – Anselm

試試這個：（如果你不關心IE9）

#tryone{ 
    max-width:1000px; 
    display: flex; 
    align-items: center; 
} 
#trytwo{ 
    max-width: 550px; 
}

來源

2016-09-18 21:15:57

可以以垂直對齊的項目使用Flexbox的。 Flexbox將有一個名爲對齊項屬性，您可以點擊此處查看：https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

爲了達到你想要什麼，你需要添加以下到#tryone編號樣式：

#tryone{ 
    max-width:1000px; 
    display:flex; 
    align-items: center; 
}

而且從#trytwo刪除（因爲我已經不再需要刪除此）：

#trytwo{ 
    top: 50%; 
    max-width: 550px; 
    margin-top: 45px; 
}

這裏是一個工作副本plunker：https://plnkr.co/edit/5jOUuMPUv4a1gvDdNfgV?p=preview

希望這有助於！

來源

2016-09-18 21:32:55 PennyBirman

div中的垂直中心元素

回答

相關問題