我想创建一个 div,它的宽度为其父 div 的 60%,高度为自身宽度的 40%。该 div 必须保持这个纵横比。
div 内应包含文字(不止一行),并且要垂直和水平居中。 我不能使用 JS 实现,只能使用 HTML 和 CSS。
我尝试使用上下 padding 技巧来创建具有给定纵横比的 div,这个技巧可以用,但是我无法垂直居中文本。
以下代码片段示例看起来很理想,只是没有固定的长宽比。
div 内应包含文字(不止一行),并且要垂直和水平居中。 我不能使用 JS 实现,只能使用 HTML 和 CSS。
我尝试使用上下 padding 技巧来创建具有给定纵横比的 div,这个技巧可以用,但是我无法垂直居中文本。
以下代码片段示例看起来很理想,只是没有固定的长宽比。
.container {
width: 80%;
background: grey;
}
.ratio {
background: white;
margin: 0px auto 0px auto;
width: 60%;
height: 300px; /* Should be 40% of width */
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
}
.text {
text-align: center;
}
<div class="container">
<h2>
Heading
</h2>
<div class="ratio">
<div class="text">
Lorem ipsum dolor sit amet, ea mel case eros lorem. In etiam aperiam consetetur vix, ex duis postulant intellegam eam, alienum officiis antiopam duo cu. Cum et dico hinc iudicabit, sonet senserit petentium ex cum, ex usu intellegam theophrastus.
</div>
</div>
<p>
Other content
</p>
</div>