Question

我正在尝试创建一个促销活动，其中图片在左边，文本在右边。如何将文字垂直居中，使其出现在照片的中间？我尝试使用margin和vertical-align，但是它们没有用。

此外，即使文本的div的宽度都设置为50％，为什么文本的div与图像的div不在同一行？

这是我的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>

提前感谢您的帮助！

Answer 1

参见Flex display和align-items:center;

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

然后，您还可以从子属性中删除inline-block和vertical-align属性。

Answer 2

添加CSS属性位置并浮动：

.main-promotion .image {
	display: inline-block;
	vertical-align: top;
	width: 50%;
	height: 100%;
	position:relative; float:left

}

.main-promotion img {
	width: 100%;

}

.main-promotion .description {
	display: inline-block;
	text-align: center;
	width: 50%;
	height: 100%;
	font-size: 2vw;
	position:relative; float:left
}

   

<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>

Answer 3

听起来像您的父div需要display: flex。然后稍微改变img的大小。

https://codepen.io/raqem/pen/BgpYwj

如何使文字垂直居中？

3 个答案: