Flex align-self 属性在具有对齐项的父级内部不起作用：基线 [重复]答案

【问题标题】：Flex align-self property not working inside a parent with align-items: baseline [duplicate]Flex align-self 属性在具有对齐项的父级内部不起作用：基线 [重复]
【发布时间】：2019-06-24 21:44:48
【问题描述】：

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

我想如果我在图像 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>

【问题讨论】：

标签： html css flexbox

【解决方案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>

你需要用显示类和特定高度将图像包装在 div 中，这就是我解决它的方法！希望对您有所帮助！

【讨论】：