gpt4 book ai didi

css - 以不同的方式对齐多个 flexbox 元素

转载 作者:行者123 更新时间:2023-12-01 13:35:31 27 4
gpt4 key购买 nike

这个问题在这里已经有了答案:





Center and bottom-align flex items

(3 个回答)


4年前关闭。




我有一个 div,里面有两个元素。我将它们放在一列中,需要第一个对齐的元素:center 和第二个对齐的元素:flex-end。我该怎么做呢?

HTML:

<div class="wrapper wrapper--login">
<h1 class="wrapper--login__title">
Demo or Die
</h1>
<a class="btn wrapper--login__btn" href="#">
Log in
</a>
</div>

css:
.wrapper--login{
display: flex;
flex-direction: column;
justify-content: flex-end;
}

最佳答案

包装器需要一个高度和标题 margin: auto 0
请注意,这将使元素在左侧可用空间(容器减去底部元素)中居中,而不是在容器的中心。

要将其相对于容器居中,请查看以下帖子:

  • center-and-bottom-align-flex-items
  • center-and-right-align-flexbox-elements


  • .wrapper--login{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 200px;
    }

    .wrapper--login__title {
    margin: auto 0;
    }
    <div class="wrapper wrapper--login">
    <h1 class="wrapper--login__title">
    Demo or Die
    </h1>
    <a class="btn wrapper--login__btn" href="#">
    Log in
    </a>
    </div>

    关于css - 以不同的方式对齐多个 flexbox 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43681877/

    27 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com