Question

我想为不同高度的图像对齐图像标题。如果我尝试垂直对齐图像，则字幕将无法对齐，另一方面，如果我对齐字幕，图像也将无法对齐。

我想，如果我在图像div上使用了align-self: center，我可以忽略在父div上使用的align-items: baseline。

到目前为止，我已经尝试过：

align-items: center上的父级：

请注意标题如何未对齐，但图像是（垂直）

align-items: baseline上的父级：

现在注意标题的对齐方式，但是第三张图像“粘”在底部

在父级上align-items: baseline，在图像上align-self: center;，这与我的第二次尝试在视觉上没有区别。

我希望网站的外观如下：

如果可能的话，也可以将第三张图片也放大

.container {
  overflow: hidden;
  width: 85%;
  margin: auto;
}

#brands {
  margin-top: 50px;
  margin-bottom: 50px;
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
}

#brands .brand-item {
  margin: 10px;
  min-width: 200px;
  max-width: 400px;
  width: 30%;
  text-align: center;
}

#brands .brand-item h3 {
  text-align: center;
  margin: 10px 0 10px 0;
}

#brands .brand-item p {
  text-align: justify;
}

#brands .brand-item img {
  align-self: center; /* this being ignored?*/
  width: 90px;
}

<section>
    <div class="container">
        <div id="brands">
            <div class="brand-item">
                <img src="https://via.placeholder.com/400x512" />
                <h3>HTML 5 Markup</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                    labore et
                    dolore magna aliqua.</p>
            </div>
            <div class="brand-item">
                <img src="https://via.placeholder.com/400x512" />
                <h3>CSS3 Styling</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                    labore et
                    dolore magna aliqua.</p>
            </div>
            <div class="brand-item">
                <img src="https://via.placeholder.com/885x200" />
                <h3>Design</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                    labore et
                    dolore magna aliqua.</p>
            </div>
        </div>
    </div>
</section>

Answer 1

.container {
  overflow: hidden;
  width: 85%;
  margin: auto;
}

#brands {
  margin-top: 50px;
  margin-bottom: 50px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

#brands .brand-item {
  margin: 10px;
  min-width: 200px;
  max-width: 400px;
  width: 30%;
  text-align: center;
}

#brands .brand-item h3 {
  text-align: center;
  margin: 10px 0 10px 0;
}

#brands .brand-item p {
  text-align: justify;
}

.img img{
 width:90px;
}
.img {
  display:flex;
  align-items:center;
  height:200px;
  justify-content: space-around;
}

<section>
    <div class="container">
        <div id="brands">
            <div class="brand-item">
              <div class="img">
                <img src="https://via.placeholder.com/400x512" />
              </div>
                <h3>HTML 5 Markup</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                    labore et
                    dolore magna aliqua.</p>
            </div>
            <div class="brand-item">
                     <div class="img">
                <img src="https://via.placeholder.com/400x512" />
              </div>
                <h3>CSS3 Styling</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                    labore et
                    dolore magna aliqua.</p>
            </div>
            <div class="brand-item">
                     <div class="img">
                <img src="https://via.placeholder.com/885x200" />
              </div>
                <h3>Design</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                    labore et
                    dolore magna aliqua.</p>
            </div>
        </div>
    </div>
</section>

您需要使用display类和特定高度将div中的图像包装起来，这就是我解决的方法！希望有帮助！

Flex的align-self属性无法在具有align-items的父级内部工作：基线

1 个答案: