Question

嘿，我是编码的新手，这是我的困境。我不知道如何在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;
}

这只是在文本div中添加了一个margin-top。唯一的问题是代码似乎不够灵活。如果我想改变我最终想要的文本大小，容器将是不平衡的，除非我更改margin-top：。是否存在一种解决方案，即文本的更改不会使容器失衡。

Answer 1

试试这个:(如果你不关心IE9）

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

Answer 2

您可以使用flexbox垂直对齐项目。 Flexbox有一个名为align-items的属性，你可以在这里查看：https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

为了达到您想要的效果，您需要将以下内容添加到#tryone ID样式中：

#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

希望这有帮助！

div

2 个答案: