如何调整导航栏布局使公司名称直接显示在城市名称的正下方？

问题原因 #

你当前代码中给图片设置了align-middle类，会让图片和旁边文字容器的垂直中线对齐，而你的文字容器内包含两行内容，整个文字块的中线对齐图片中线后，就会导致第二行公司名落到图片下方区域，视觉上像是跳了单独新行。 #

修复方案 #

你可以通过Flex布局调整对齐逻辑，不需要改动原有DOM结构层级，修改后代码如下：

<nav class="navbar" style="background-color: #264653;position:absolute;top:0px;left:50%;transform:translateX(-50%);width:90%">
  <div class="container-fluid">
    <!-- 给navbar-brand加flex布局类，让内部元素垂直居中对齐 -->
    <span class="navbar-brand d-flex align-items-center">
      <!-- 去掉img多余的align-middle类，flex已经处理对齐逻辑 -->
      <img src="~/Images/infoYellow.png" alt="RCA" width="70" height="70" class="d-inline-block mr-2" runat="server">
      <span>
        <!-- 两行文字分别设为块级元素，保证上下排列，调整line-height控制行间距 -->
        <span style="font-size:25px;color:white;display:block;line-height:1.2;">City of Testing</span>
        <span style="font-size:25px;color:white;display:block;line-height:1.2;">My Company name</span>
      </span> 
    </span>
  </div>
</nav>

你可以根据实际显示效果调整line-height的数值，自定义两行文字的上下间距。

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