时间戳

首页 > 解决方案 > 尝试对齐其父容器为标题的容器内的项目

html - 尝试对齐其父容器为标题的容器内的项目

问题描述

我有一个header容器，里面有 3 个header组件容器header__left ，header__middle并且header__right，我给了每个组件一个父容器，我想稍后将其用于align子项目，我基本上想要容器align内的项目，header__left但每当我尝试添加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>

标签： htmlcssheadercontainersalignment

解决方案

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

#brand h1{

margin-left: 0 auto;}

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

所以你可以使用类似的东西margin-left: 10px;将你的品牌 html 向右移动。

推荐阅读