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中的垂直中心元素

回答

相关问题