如何使用Flexbox垂直对齐父div中的Sign up按钮

修改核心CSS规则 #

当前你的.cta-container使用了flex-direction: column，导致文本和按钮上下排列，不符合预期的横向并排且垂直居中效果。需要调整以下几点：

• 移除.cta-container的flex-direction: column（Flex默认方向为row，无需额外声明）
• 给.cta-container添加align-items: center，实现子元素垂直居中
• 给.cta-container添加justify-content: space-between，让文本区域和按钮分别向左右两侧分布
• 移除按钮的align-self:flex-end（不再需要）

修改后的完整代码 #

CSS部分

.fourth-section{
display: flex;
margin-top: 70px;
justify-content: center;
}

.cta-container{
    display: flex;
    width: 760px;
    background-color: #3882F6;
    padding: 30px;
    align-items: center;
    justify-content: space-between;
}

.cta-texts{
    width: 450px;
}

#signup{
    color: #ffffff;
    font-weight: bold;
    border: none;
    outline:2px;
    outline-style:solid;
    outline-color: #ffffff;
    border-radius: 5px;
    background-color: #3882F6;
    padding: 5px 40px 5px 40px;
    width: 150px;
}

HTML部分（无需修改）

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Landing Page</title>
        <link rel="stylesheet" href="/css/styles.css">
    </head>
    <body>
       
            <div class="fourth-section">
                <div class="cta-container">
                    <div class="cta-texts">
                    <header id="cta-header">Call to action! It's time!</header>
                    <p>Sign up for our product by clicking that button right over there!</p> 
                    </div>
                    <button id="signup">Sign up</button>
                </div>
            </div>
        
    </body>
</html>

效果说明 #

修改后，文本区域和按钮会横向排列，按钮与文本内容垂直居中对齐，同时两者分别占据容器的左右两侧，完全匹配预期样式。

内容的提问来源于stack exchange，提问作者akinpinkman