Question

我正在尝试在我的主要部分插入3张图片。我想对齐它们，但我的第三个图像留在页面的底部。我试图缩小图像，但没有任何变化。我使用了“左边距”，“底部距”和“浮动”，但没有任何效果。

main section h1 {
  margin-right: 10px;
  margin-top: 150px;
  float: left;
}

main section h2 {
  margin-top: 200px;
  margin-left: auto;
  margin-right: auto;
}

main section h3 {
  margin-top: 150px;
  margin-left: 10px;
  float: right;
}

Answer 1

您可以使用display: flex，例如：

HTML

<body>
<div>
    <img src='1.jpg'>
    <img src='2.jpg'>
    <img src='3.jpg'>
</div>
</body>

CSS

    *{
        margin: 0;
        padding: 0;
    }

    body{
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;//ALIGN DIV VERTICALLY
    }

    div{
        display: flex;
        justify-content: center;//ALIGN IMG'S HORIZONTALLY
        width: 100%;
    }

    img{
        width: 300px;
        height: 180px;
    }

    img:nth-of-type(2){
        margin: 0 20px
    }

在此链接中查找结果：https://imgur.com/a/VwmvRjp

在主要部分对齐图像

1 个答案: