需求：实现网页头部图片居左、整体居中且宽度弹性的布局

优化后的HTML结构 #

先替换过时的<CENTER>标签，改用CSS实现居中，并将文本内容单独包裹，让布局结构更清晰：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv=Content-Type content="text/html; charset=utf-8">
    <link rel="stylesheet" href="/style.css">
</head>
<body>
<header class="site-header">
    <img src="/files/your-logo.png" height="128" alt="logo" class="header-logo">
    <div class="header-content">
        This is some content of the header like text, links, buttons etc.<br>
        You can add multiple lines here, buttons or other elements.
    </div>
</header>
</body>
</html>

对应的CSS代码（style.css） #

通过Flex布局实现需求的三个效果：

/* 可选：重置默认边距，避免浏览器样式干扰 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.site-header {
    /* 让头部宽度自适应内容（弹性宽度） */
    width: fit-content;
    /* 实现整体水平居中 */
    margin: 0 auto;
    /* Flex布局让图片与文本横向排列 */
    display: flex;
    /* 图片和文本之间留间距 */
    gap: 16px;
    /* 垂直方向顶部对齐，确保图片占据多行文本空间 */
    align-items: flex-start;
    /* 可选：给头部加内边距，提升视觉舒适度 */
    padding: 16px;
}

.header-logo {
    /* 固定图片高度，宽度自动按比例缩放 */
    height: 128px;
    /* 禁止图片被压缩，保证占据固定空间 */
    flex-shrink: 0;
}

.header-content {
    /* 文本容器自动填充剩余空间，支持多行换行 */
    flex-grow: 1;
    /* 可选：设置行高，提升文本可读性 */
    line-height: 1.5;
}

效果说明 #

• 整体居中：margin: 0 auto配合width: fit-content，让头部自适应内容宽度并水平居中。
• 图片占多行空间：flex-shrink: 0确保图片不会被压缩，始终保持设定高度，文本容器自动换行填充剩余区域。
• 弹性宽度：width: fit-content让头部宽度完全由内部内容决定，随文本或图片尺寸自适应变化。

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