Question

我在将物品放在弹性容器中的位置时遇到一些困难。容器本身具有以下设置：

height: 100vh;
display: flex;
Justify-content: center;

我希望徽标垂直居中，地址div齐平地位于容器底部。

https://codepen.io/randometc/pen/djOpzN

到目前为止，我还无法获得地址div使其位于容器底部的齐平位置。我已经尝试了两件事，但都没有奏效。

首先我尝试了

align-self: flex-end;

那什么也没做，我不明白为什么。

我尝试过的第二件事是这个

margin-top: auto;

这会将地址放在底部，但将徽标本身推到顶部。

如何使用flex属性将徽标垂直居中放置在底部，地址div放置在底部！？

感谢您的帮助

Answer 1

添加此样式

.logo-wrapper {
  flex: 1 0 auto;
      display: flex;
    align-items: center;
}

查看更新后的codepen

.section-top {
  height: 100vh;
  background-color: orange;
  display: flex;
  flex-flow: column;
  justify-content: center;
}

.logo-wrapper {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
}

.logo-wrapper img {
  display: block;
  margin: 0 auto;
  width: 65%;
}

.address-wrapper {
  margin-top: auto;
  position: relative;
  border: 1px solid blue;
  font-size: 1.6rem;
  text-align: center;
  width: 100%;
  display: block;
}

<div class="section-top">
  <div class="logo-wrapper"><img src="http://www.caudillandcarden.com/some-logo.png"></div>
  <div class="address-wrapper">
    <span class="address">1234 Some 
Street, Somewhere KY 40502</span>
  </div>
</div>

Answer 2

也将.logo-wrapper的上边距设置为auto（pen）：

html,
body {
  margin: 0;
  padding: 0;
}

.section-top {
  height: 100vh;
  background-color: orange;
  display: flex;
  flex-flow: column;
  justify-content: center;
}

.logo-wrapper {
  margin-top: auto;
  align-self: center;
}

.logo-wrapper img {
  display: block;
  margin: 0 auto;
  width: 65%;
}

.address-wrapper {
  display: block;
  margin-top: auto;
  border: 1px solid blue;
  font-size: 1.6rem;
  text-align: center;
}

<div class="section-top">
  <div class="logo-wrapper">
    <img src="https://picsum.photos/200/100">
  </div>
  <div class="address-wrapper">
    <span class="address">1234 Some 
    Street, Somewhere KY 40502</span>
  </div>
</div>

Answer 3

您必须在CSS文件中进行更改：

.logo-wrapper img {
  display: block;
  margin:0 auto;
  width: 65%;
}
.address-wrapper {
  margin-top: auto;
  position:relative;
  border: 1px solid blue;
  font-size: 1.6rem;
  text-align: center;
  width: 100%;  
  display: block;
}

在flex容器中，我怎样才能使一个项目的垂直中心位于flex末端的垂直底部？

3 个答案: