如何在两个标题间插入可自动调整位置大小、随文本相对定位的图片

实现方案 #

首先修正你原有代码的两处基础问题：

1. HTML结构错误：<body> 标签不能嵌套在 <head> 标签内，二者为同级关系
2. 布局选型问题：float 不适合实现「元素水平依次排列+对齐」的需求，换成 Flex 布局实现更简单，可维护性更强

修正后完整代码

HTML代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>品牌标题</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="logotext">
        <h1 id="h1">Huron</h1>
        <!-- 将logo放到两个标题中间，符合排列顺序要求 -->
        <img id="logo" src="https://dummyimage.com/600x600/000/fff" alt="品牌logo">
        <h1 id="h2">Interplanetary</h1>
    </div>
</body>
</html>

CSS代码

body {
    background-color: black;
    margin: 0;
}
.logotext {
    padding: 25px;
    font-family: abnes, sans-serif; /* 增加兜底字体，避免自定义字体加载失败显示异常 */
    color: white;
    /* Flex布局核心代码 */
    display: flex;
    align-items: center; /* 三个元素垂直居中对齐 */
    justify-content: center; /* 整体水平居中，如需贴两端可改为 space-between */
    gap: 16px; /* 元素间的间距，可自行调整数值 */
}
/* 清除h1默认外边距，避免排版错位 */
.logotext h1 {
    margin: 0;
    font-size: 32px; /* 可按需调整文字大小 */
}
#logo {
    /* 让logo高度和文字高度保持一致，自动等比缩放宽度，不会变形 */
    height: 1em;
    width: auto;
}

实现效果说明

• logo会自动和两侧文字保持垂直居中对齐
• 调整文字大小时，logo会自动跟随文字大小等比缩放，无需手动修改尺寸
• 元素间距可通过调整.logotext的gap属性自由控制
• 如需整体内容贴左右两端，将.logotext的justify-content属性值改为space-between即可

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