CSS 中心和左对齐问题答案

【问题标题】：CSS Center and Left Alignment IssueCSS 中心和左对齐问题
【发布时间】：2021-03-05 21:01:30
【问题描述】：

我需要一些帮助来对齐两个项目，一个在顶部中心，一个在左上角。我有一个包含这两个项目的父 div。

                <div className = {modalStyles.header}>
                    <span className = {modalStyles.close_button}onClick={()=>setIsOpen(false)}>Cancel</span>
                    <span className = {modalStyles.title}>Add to Playlist</span>
            </div>

CSS代码是：

.header{
padding-top: 25px;
padding-bottom: 25px;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
}

.close_button{
display: inline-block;
color: #181B2C;
font-family: url('../../public/fonts/Lato-Bold.ttf');
font-size: 18px;
cursor: pointer;
margin: 25px;
}

.title{
display: inline-block;
color: #181B2C;
font-family: url('../../public/fonts/Lato-Bold.ttf');
font-size: 20px;
font-weight:600;
margin: auto;
}

我遇到的问题是标题在标题的中心没有正确对齐。它似乎与关闭按钮对齐。

【问题讨论】：

尝试将标题设置为flex: 0 0 95% 和text-align: center

标签： javascript html css reactjs

【解决方案1】：

您可以使用相对位置来调整它：

.title{
display: inline-block;
color: #181B2C;
font-family: url('../../public/fonts/Lato-Bold.ttf');
font-size: 20px;
font-weight:600;
margin: auto;
position: relative;
right: 25px; // same amount as left margin of close_button
}

【讨论】：