<div class="container">
<img src="your_image.jpg" alt="Your Image">
<p>Your text here</p>
</div>
.container {
border: 1px solid red;
width: 300px; /* 设置盒子的宽度 */
height: 300px; /* 设置子的高度 */
display: flex; /* 使用弹性盒子布局 */
flex-direction: column; /* 将子元素垂直排列 */
justify-content: center; /* 在垂直方向上居对齐 */
align-items: center;
}
img {
height: 200px;
width: 200px;
}
.container p {
text-align: center; /* 文字水平居中对齐 */
}
效果 :