Bootstrap 4卡图像未对齐

Question

所以我创建了一个名为服务的非引导类，里面有3个具有相同分辨率（225x225 px）的引导4卡，然后将其样式指定为display：flex以使其水平对齐。他们实际上并没有对齐。

我尝试为每个属性使用相同的width和height属性，但是没有用。img样式的rem属性都没有。

InputNeuron

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

Answer 1

如果您使用的是引导程序，则只需添加引导程序类

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;