如何使文本垂直居中？
如何使文本垂直居中？
提问于 2019-06-21 01:45:07
我正在尝试创建一个促销活动，其中图片在左边，文字在右边。如何将文本垂直居中，使其显示在照片的中间？我尝试过使用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>
提前感谢您的帮助！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56691352
复制相关文章
相似问题