尝试对齐其父容器为标题的容器内的项目答案

【问题标题】：trying to align items inside a container whose parent container is header尝试对齐其父容器为标题的容器内的项目
【发布时间】：2021-02-05 08:15:14
【问题描述】：

我有一个 header 容器，在里面我有 3 个容器，用于存放 header 组件 header__left 、header__middle 和 header__right，我已经为这些组件中的每一个提供了一个父容器，我想稍后使用到 align 子项目，我基本上想在 header__left 容器中添加 align 项目，但是每当我尝试添加 margin-left 以使 h1 转到 header__left 容器的右侧时，它不会工作

*{
    margin: 0px;
    padding: 0px;
}

header{
    background-color: gray;
    border-bottom: 3px solid red;
}

#logo img{
 
    height: 100px;
    width: 100px;
}

.container{
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#brand{

    width: 200px;
    
}

#brand h1{

    margin-left: 0 auto;
}

<body>

    <header>
        <div class="container">

            <div class="header__left">
                <div id="brand">
                    <h1>Brand</h1>
                </div>
            </div>



            <div class="header__middle">

                <div id="logo">
                    <img src="phonix.png" alt="">
                </div>

            </div>

            <div class="header__right">

                <ul>

                    <li><a href="#">hOME</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">stuff</a></li>
                </ul>

            </div>


        </div>
    </header>

</body>

【问题讨论】：

文本对齐#brand

标签： html css header containers alignment

【解决方案1】：

我看到您在 margin-left 属性上使用了两个因素。让我们看看这部分代码：

#brand h1{

margin-left: 0 auto;}

margin-left 属性不能得到两个因素。它只是使用这些项目（数字、百分比或自动）

因此您可以使用 margin-left: 10px; 之类的东西将您的品牌 html 向右移动。

【讨论】：