CSS元素定位问题：Header内H1无法居中被图片挤出

我刚接触CSS，尝试将Header中的H1标签居中，但H1被图片挤出了div容器，调整图片margin也没用，期望H1能在Header内居中而非偏移。

现有代码 #

HTML代码 #

<header>
    <a href="index.html" class="flex">
        <img src="images/dog.png" alt="outline of a dog's face with heart above it">
        <h1>Delilah's Doggy Daycare</h1>
    </a>
</header>

CSS代码 #

header{
background-color: #E5AF42;
height: 150px;
margin: 0;
}
header img{
    width: 100px;
    height: 100px;
    margin: 25px 0 25px 25px;
}
header h1 {
    font-size: 48px;
    display: flex;
    align-items: center;
    justify-content: center; 
    margin: 0;
}

问题原因 #

你错误地给H1标签设置了display:flex，这只会让H1自身变成flex容器（但它没有子元素），无法实现H1在Header内的居中。同时包裹图片和H1的<a>标签没有设置合适的布局，导致H1被图片挤压偏移。

解决方法 #

调整CSS布局，让Header和<a>标签作为flex容器，利用margin:auto实现H1的水平居中：

header{
    background-color: #E5AF42;
    height: 150px;
    margin: 0;
    display: flex; /* 让Header成为flex容器，垂直居中内部元素 */
    align-items: center;
}
header img{
    width: 100px;
    height: 100px;
    margin-left: 25px; /* 仅保留左侧margin，上下由Header的align-items控制 */
}
header .flex {
    display: flex;
    align-items: center;
    width: 100%; /* 让a标签填满Header宽度，为H1居中提供空间 */
}
header h1 {
    font-size: 48px;
    margin: 0 auto; /* 自动左右margin，实现H1在Header内水平居中 */
}

这样修改后，图片会固定在Header左侧，H1则会在整个Header的水平中心位置，同时两者都保持垂直居中。

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