我正在尝试创建一个促销活动,其中图片在左边,文字在右边。如何将文本垂直居中,使其显示在照片的中间?我尝试过使用margin
和vertical-align
,但它们都不起作用。
此外,为什么包含文本的div与包含图像的div不显示在同一行上,即使它们的宽度都设置为50%?
这是我的HTML和CSS:
.main-promotion .image {
display: inline-block;
vertical-align: top;
width: 50%;
height: 100%;
}
.main-promotion img {
width: 100%;
}
.main-promotion .description {
display: inline-block;
text-align: center;
width: 50%;
height: 100%;
font-size: 2vw;
}
<div class="main-promotion">
<div class="image">
<img src="https://images.newscientist.com/wp-content/uploads/2019/01/14144335/art-800x533.jpg" alt="Image Here">
</div>
<div class="description">
<h3> Get access to the morning routine used by world-class performers for FREE! </h3>
<p> We'll send it to you immediately! </p>
<button> Click me! </button>
</div>
</div>
提前感谢您的帮助!
https://stackoverflow.com/questions/56691352
复制相似问题