Question

我有一个包含3个子级的HTML div（父级）。这些孩子中的每一个都包含图像和文本。图像可以是小/中/大，其高度反映尺寸。我的目标是使图像与中心对齐，而文本在底部对齐。这是我创建的起点： https://codepen.io/giorgi-tediashvili/pen/KKwjrzr

#parent {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.smallImage {
  height: 30px;
}

.mediumImage {
  height: 70px;
}

.largeImage {
  height: 110px;
}

.child {
  padding: 10px;
}

<div id="parent">
  <div class="child child1">
    <img src="https://www.w3schools.com/images/w3schools_green.jpg" class="smallImage" />
    <br/>
    <text>Small</text>
  </div>
  <div class="child child2">
    <img src="https://www.w3schools.com/images/w3schools_green.jpg" class="mediumImage" />
    <br/>
    <text>Medium</text>
  </div>
  <div class="child child3">
    <img src="https://www.w3schools.com/images/w3schools_green.jpg" class="largeImage" />
    <br/>
    <text>Large</text>
  </div>
</div>

屏幕截图：

期望的结果：

Answer 1

您可以像下面一样尝试使用flexbox作为嵌套容器：

#parent {
  display: flex;
  flex-direction: row;
}

.smallImage {
  height: 30px;
}

.mediumImage {
  height: 70px;
}

.largeImage {
  height: 110px;
}

.child {
  padding: 10px;
  display:flex;
  flex-direction:column;
}
img {
  margin:auto;
}
span {
 text-align:center;
}

<div id="parent">
  <div class="child child1">
    <img src="https://www.w3schools.com/images/w3schools_green.jpg" class="smallImage" >
    <span>Small</span>
  </div>
  <div class="child child2">
    <img src="https://www.w3schools.com/images/w3schools_green.jpg" class="mediumImage" >
    <span>Medium</span>
  </div>
  <div class="child child3">
    <img src="https://www.w3schools.com/images/w3schools_green.jpg" class="largeImage" >
    <span>Large</span>
  </div>
</div>

Answer 2

我将图像和文本放在每一列的单独行中。文本行将折叠到文本高度，您可以使图像垂直居中。

.flex-h {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.flex-v {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.flex-v :first-child {
    flex: auto;
    display: flex;
    justify-content: center;
    align-self: center;
}

.flex-v :last-child {
    flex: none;
}

.smallImage {
    height: 30px;
}

.mediumImage {
    height: 70px;
}

.largeImage {
    height: 110px;
}

.child {
    padding: 10px;
}

<div class="flex-h">
    <div class="flex-v">
        <div class="child child1">
            <img src="https://www.w3schools.com/images/w3schools_green.jpg" class="smallImage" />
        </div>
        <div class="child child1">
            <text>Small</text>
        </div>
    </div>

    <div class="flex-v">
        <div class="child child2">
            <img src="https://www.w3schools.com/images/w3schools_green.jpg" class="mediumImage" />
        </div>
        <div class="child child1">
            <text>Medium</text>
        </div>
    </div>

    <div class="flex-v">
        <div class="child child3">
            <img src="https://www.w3schools.com/images/w3schools_green.jpg" class="largeImage" />
        </div>
        <div class="child child1">
            <text>Large</text>
        </div>
    </div>
</div>

Answer 3

我稍微弄乱了填充物，我觉得它似乎更近了：

.parent {
 display: flex;
flex-direction: row;
align-items: stretch;
}

.smallImage{
height: 30px;
padding-bottom: 30px;
padding-right: 10px;
}
.mediumImage{
height: 70px;
padding-bottom: 10px;
padding-right: 10px;
}
.largeImage{
height: 110px;
padding-top: 10px;
padding-right: 10px;
}

.child {
padding: 10px;
}
.v-center {
align-items: center;
}

如何才能部分对齐，底部对齐的内容？

3 个答案: