左边距弄乱了布局的对齐方式答案

【问题标题】：margin left messing the alignment of the layout左边距弄乱了布局的对齐方式
【发布时间】：2021-05-15 15:06:09
【问题描述】：

所以我基本上有一个简单的标题，它有header__left、header__middle 和header__right，它们都被包裹在一个包装器div 中，我的内容在 header__left 和 header__right 但在 header__middle 我有页面的``ulandliitems now they are junmpled together so if i usemargin rightor left on them i think it messes thealignment``` 从逻辑上讲，我知道事情将不再居中是有道理的，但我不知道任何其他方式，那么更清洁的方式是什么?

body{

    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    background: #2c3e50;
}


header{
    background: white;
}

.wrapper{
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.header__middle ul{
    
    list-style-type: none;
    display: flex;

}

.header__middle ul li a{


    margin-right: 10px;
    text-decoration: none;
    font-size: 1.2em;
    color: black;
    text-align: center;


}






.header__right h1{

    border: 1px solid black;
    background-color: rgba(255, 255, 0,1);
    padding: 10px;
    cursor: pointer;

}

.header__right h1 a{
    text-decoration: none;
    color: black;
    transition: 0.3s ease all;
}

<header>
        <div class="wrapper">
            <div class="header__left">
                <h1>KYOSK</h1>
            </div>

            <div class="header__middle">
                <ul>
                    <li ><a href="#">Home</a></li>
                    <li><a href="#">Join</a></li>
                    <li><a href="#">FAQs</a></li>
                    <li><a href="#">About Us</a></li>
                </ul>
            </div>

            <div class="header__right">
                <h1><a href="#">Contact Us</a></h1>
            </div>
        </div>
    </header>

【问题讨论】：

标签： html css flexbox alignment centering

【解决方案1】：

对您的 CSS 进行了一些更正。我觉得会更漂亮。

body{

    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
    background: #2c3e50;
}


header{
    background: white;
}

.wrapper{
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.header__middle ul{
    
    list-style-type: none;
    display: flex;
    justify-content: center;
    padding: 0;

}

.header__middle ul li {


    padding: 5px;
    text-decoration: none;
    font-size: 1.2em;
   
    text-align: center;


}

    .header__middle ul li a {
     text-decoration: none;
     color: #000;
     }






.header__right h1{

    border: 1px solid black;
    background-color: rgba(255, 255, 0,1);
    padding: 10px;
    cursor: pointer;

}

.header__right h1 a{
    text-decoration: none;
    color: black;
    transition: 0.3s ease all;
}

<header>
        <div class="wrapper">
            <div class="header__left">
                <h1>KYOSK</h1>
            </div>

            <div class="header__middle">
                <ul>
                    <li ><a href="#">Home</a></li>
                    <li><a href="#">Join</a></li>
                    <li><a href="#">FAQs</a></li>
                    <li><a href="#">About Us</a></li>
                </ul>
            </div>

            <div class="header__right">
                <h1><a href="#">Contact Us</a></h1>
            </div>
        </div>
    </header>

【讨论】：