如果你希望文字左右居中而图片垂直居中,可以按照以下方式设计整体居中:
<div class="container">
<div class="text-container">
<p>Your text here</p>
</div>
<img src="your-image.jpg" alt="Your Image" />
</div>
<style>
.container {
width: 500px;
height: 300px;
display: flex;
justify-content: center; /* 水平居中 */
}
.text-container {
display: flex;
align-items: center; /* 垂直居中 */
}
img {
margin-left: 20px; /* 可调整图片和文字之间的距离 */
}
</style>
在上述代码中,我们使用了 display: flex;
和相关属性来实现容器和文本的水平居中以及图片的垂直对齐。你可以根据需要调整容器大小、文字内容、图片路径和样式。
内容由零声教学AI助手提供,问题来源于学员提问