CSS是一种用于设计网页的语言,使得网页更加美观、互动、易于导航。本文将介绍如何利用CSS使两张图片上下排列。 .container { display: flex; flex-direction:
CSS是一种用于设计网页的语言,使得网页更加美观、互动、易于导航。本文将介绍如何利用CSS使两张图片上下排列。
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.img {
width: 300px;
height: auto;
margin-bottom: 20px;
}
首先,我们需要一个包含两张图片的容器。这里的容器我们选用了flex布局,并且让图片垂直排列,并且居中显示。下面是CSS代码。
<div class="container">
<img src="image1.jpg" alt="image1" class="img">
<img src="image2.jpg" alt="image2" class="img">
</div>
接下来,我们需要在HTML代码中添加两张图片的标签,并设置它们的class属性为img。同时,我们也可以设置图片的宽度和高度,并且让它们相对于容器的底部有20px的margin。
通过以上CSS和HTML的设置,两张图片就可以实现垂直排列了。
粉丝
0
关注
0
收藏
0