HTML实现图片右侧上下排列两行文本的排版方法

排版错位的核心原因：

• <img>默认行内属性未做布局划分，无法和右侧文本形成独立的左右区块
• <p>是块级元素默认独占整行，会自动换行到最左侧（logo下方），无法跟在第一行文本下方

修正步骤 #

1. 调整HTML结构，将两行文本统一包裹在独立容器中，和logo保持平级：

<div>
    <a class="navbar-brand" href="{% url 'home' %}">
        <img id="logo" src="{% static 'images/SigmaNuLogo.jpg' %}" alt="Sigma Nu 标识">
        <div class="brand-text">
            <span class="brand-main">Sigma Nu @ University of Michigan</span>
            <span class="brand-sub">Gamma Nu Chapter</span>
        </div>
    </a>
</div>

2. 添加CSS样式，用Flex布局实现左右分栏、文本纵向堆叠的效果：

/* 导航品牌区设置弹性布局，实现logo和文本左右排列 */
.navbar-brand {
    display: flex;
    align-items: center; /* logo和文本块垂直居中对齐 */
    gap: 1rem; /* 控制logo和右侧文本的间距，可按需调整数值 */
    text-decoration: none; /* 清除链接默认下划线 */
}

/* 控制logo尺寸，保持比例自适应 */
#logo {
    height: 60px;
    width: auto;
}

/* 文本容器设置纵向弹性布局，让两行文字上下堆叠 */
.brand-text {
    display: flex;
    flex-direction: column;
}

/* 主文本样式 */
.brand-main {
    font-weight: 600;
    font-size: 1.1rem;
}

/* 副文本样式 */
.brand-sub {
    font-size: 0.9rem;
}

你可以根据实际页面的设计规范，调整logo高度、间距、字体大小、字重等参数，匹配目标视觉效果。不要直接将块级元素（如<p>）和行内文本、图片平级放置在链接容器内，很容易触发非预期的换行错位。

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