Question

我有3个正方形，并排不同的高度。我希望它们彼此底部对齐，但我希望整个组在一个包含框内对齐。

似乎将它们放在样式为1.1 => 1.1 1.12 => 1.1 1.14 => 1.1 1.15 => 1.1* 1.17 => 1.15 1.18 => 1.15 2.04 => 2.0 2.25 => 2.25 2.549 => 2.5 2.57 => 2.55 2.65 => 2.6*的包装器中应该这样做。但不，它不起作用。

有关如何执行此操作的任何建议吗？

https://plnkr.co/edit/IjqMn5W8xZxdy0XTWrAw?p=preview

vertical-align:middle

#red {
  background-color: #FF0000;
  height: 20px;
  width: 20px;
}
#green {
  background-color: #00FF00;
  height: 60px;
  width: 60px;
}
#blue {
  background-color: #0000FF;
  height: 40px;
  width: 40px;
}
#container {
  width: 300px;
  height: 100px;
  border: thin solid black;
}
#wrapper {
  vertical-align: middle;
}
body {
  font-size: 0;
}

Answer 1

#container {
  display: table;
}
#wrapper {
  display: table-cell;
}

http://codepen.io/Deka87/pen/oYXOwg

如果不想使用flexbox，你应该使用表格布局。

Answer 2

尝试使用display: flex;。 #container应该有align-items: center;属性，#wrapper需要align-items: flex-end;

您可以为以下选项更改align-items：

flex-start：项目的交叉开始边距边缘放在交叉起跑线上

flex-end：项目的跨端边距边缘放在十字线上

center：项目以横轴为中心

基线：项目已对齐，例如其基线对齐

拉伸（默认）：拉伸以填充容器（仍然尊重最小宽度/最大宽度）

此处了解有关 Flex

的更多信息

回到你的问题。请看这个示例：

＆＃13;

#red {
    background-color:#FF0000;
    height: 20px;
    width: 20px;
}

#green {
    background-color:#00FF00;
    height: 60px;
    width: 60px;
}

#blue {
    background-color:#0000FF;
    height: 40px;
    width: 40px;
}

#container {
    display: flex;
    align-items: center;
    width: 300px;
    height:100px;
    border: thin solid black;
}

#wrapper {
    display: flex;
    align-items: flex-end;
}

body {
    font-size:0;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>

<body>
    <div id="container">
        <div id='wrapper'>
            <img id="red" src="">
            <img id="green" src="">
            <img id="blue" src="">
        </div>
    </div>
</body>

</html>

＆＃13;

Fiddle demo

如何垂直居中一组底部对齐的图像？

2 个答案: