html - Bootstrap 4 卡图像不对齐

Question

所以我创建了一个非 Bootstrap 类，称为服务。它里面有 3 个 Bootstrap 4 张具有相同分辨率(225x225 像素)的卡。然后我将其样式指定为 display: flex，以便它们水平对齐。但是他们实际上并不对齐。

我尝试为它们中的每一个使用相同的宽度和高度属性，但它没有用。img 样式 rem 属性也没有。

<div class = "services">

    <div class="card">
        <img src="img/html.png" class="card-img-top" alt="HTML">
    </div>

    <div class="card">
        <img src="img/css.png" class="card-img-top" alt="CSS" >         
    </div>

    <div class="card">
        <img src="img/js.png" class="card-img-top" alt="JS" >
    </div>

</div>

卡片图像应具有相同的宽度和相同的高度，并且完全水平对齐。

Answer 1

如果你使用的是 Bootstrap ，你只需要添加 Bootstrap 类

d-flex

flex

<div class = "services d-flex">
          <div class="card">
              <img src="https://images.unsplash.com/photo-1558980664-1db506751c6c?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" class="card-img-top" alt="HTML">
            </div>
            <div class="card">
                <img src="https://images.unsplash.com/photo-1558980664-1db506751c6c?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" class="card-img-top" alt="CSS" >         
              </div>
              <div class="card">
                  <img src="https://images.unsplash.com/photo-1558980664-1db506751c6c?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" class="card-img-top" alt="JS" >
                </div>
          </div>

这段代码的结果是

如果你想在自定义CSS中做你需要把自己的样式放在父类中

display:flex;