HTML布局问题：如何将Logo与Heading置于同一行？

问题根源 #

你的代码里有几个直接导致布局异常的问题：

• 存在无意义的空<img align=”left”>标签，既无效还干扰布局
• <h1>是块级元素，默认独占一行，且自带较大上下外边距
• 水平线<hr>默认上下外边距偏大，导致和标题间距过宽

修正后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Man Utd Merch</title>
    <style>
        /* 用flex容器包裹logo和标题，实现同行居中 */
        .header-wrap {
            display: flex;
            align-items: center; /* 垂直方向居中对齐 */
            justify-content: center; /* 水平方向整体居中 */
            gap: 12px; /* 控制logo和标题的间距 */
            margin-bottom: 0.5rem; /* 缩小和下方水平线的距离 */
        }

        h1 {
            margin: 0; /* 清除h1默认的上下外边距 */
            font-size: 2rem;
        }

        hr {
            margin-top: 0; /* 清除水平线默认的上外边距 */
            border: none;
            border-top: 2px solid #e1e1e1;
        }
    </style>
</head>
<body>
    <div class="header-wrap">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/7/7a/Manchester_United_FC_crest.svg/800px-Manchester_United_FC_crest.svg.png" width="50" height="50" alt="Man Utd Logo">
        <h1>Man Utd Merch</h1>
    </div>
    <hr>
</body>
</html>

核心修改说明 #

• 新增.header-wrap容器，通过Flex布局实现Logo和标题的同行垂直居中，gap属性可以灵活调整两者间距
• 移除无效的空<img>标签
• 清除<h1>默认外边距，避免多余留白
• 调整<hr>的上外边距，缩小和标题的间距，还可自定义水平线样式

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