CSS对齐项目不工作，而对齐内容在Flexbox中工作[重复]

wgx48brx 于 2023-02-26 发布在其他

关注(0)|答案(1)|浏览(129)

- 此问题在此处已有答案**：

How can I vertically center a div element for all browsers using CSS?（48个答案）
2天前关闭。

body{
    background-color: #354457;
    color: #fff;
}
.title{
    margin-top: 30px;
}
#container{
    max-width: 150px;
    margin: 0 auto;
}
.login_container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

<div id="container">
    <div class="login_container">
        <p class="title">WELCOME</p>
        <p class="subtitle">LET'S GET STARTED</p>
        <input type="text" value="" placeholder="Username" required>
        <br>
        <input type="password" placeholder="Password">
        <br>
        <button>Login</botton>
    <div>
<div>

当我使用弹性框时，我不知道为什么它的属性不能工作。看起来"justify-content"可以工作，但"align-items"不行。有人能帮我吗？

css

来源：https://stackoverflow.com/questions/75542230/css-align-items-not-working-while-justify-content-working-in-flexbox

1条答案

按热度按时间

daupos2t1#

CSS中的align-items属性控制项目在横轴上的对齐方式，另一方面，justify-content定义浏览器如何沿Flex容器的主轴在内容项目之间和周围分配空间。
您需要扩展容器div的最大宽度，并将flex框的方向更改为列，然后您可以看到对齐项工作正常

body{
    background-color: #354457;
    color: #fff;
}
.title{
    margin-top: 30px;
}
#container{
    max-width: max-content;
    margin: 0 auto;
}
.login_container{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
}

<div id="container">
    <div class="login_container">
        <p class="title">WELCOME</p>
        <p class="subtitle">LET'S GET STARTED</p>
        <input type="text" value="" placeholder="Username" required>
        <br>
        <input type="password" placeholder="Password">
        <br>
        <button>Login</botton>
    <div>
<div>

赞(0）回复(0）举报 2023-02-26

我来回答

CSS对齐项目不工作，而对齐内容在Flexbox中工作[重复]

1条答案

相关问题

热门标签

最新问答