如何垂直居中文字?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (28)

我正在尝试创建一个促销,其中图片在左侧,文本在右侧。如何将文本垂直居中以使其显示在照片中间?我已经尝试使用marginvertical-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>

预先感谢您的帮助!

提问于
用户回答回答于

柔性显示器,以align-items:center;

    .main-promotion{
        display: flex;
        align-items: center;
    }

然后,您可以同时删除inline-block,并vertical-align从您的孩子性能特性。

用户回答回答于

扫码关注云+社区

领取腾讯云代金券