如何用CSS实现文本与元素等高且并排显示？

我来帮你搞定这个布局问题！你现在的代码虽然能让元素并排，但没法保证高度一致，主要是因为display:inline没法很好地控制垂直对齐和高度匹配。推荐用Flexbox布局来实现，它是现代前端布局的首选方案，能轻松让元素高度一致且灵活对齐。

修改后的代码（Flexbox方案） #

<div class="row">
  <div class="col-xs-12 text-center" style="display: flex; align-items: center; justify-content: center; gap: 2rem;">
    <p style="margin: 0; text-align: left;">
      初期費用 <br> 
      月額費用 <br>
      手続き料
    </p>
    <h3 style="margin: 0;">0<span>円</span></h3>
  </div>
</div>

关键属性说明： #

• display: flex：将父容器转换为Flex容器，子元素自动成为Flex项目
• align-items: center：让子元素在垂直方向居中，同时强制所有子元素高度与容器内最高元素保持一致
• justify-content: center：保持你原本需要的水平居中效果
• gap: 2rem：给两个元素之间添加间距，避免内容挤在一起
• 移除<p>和<h3>的默认margin：避免浏览器默认样式干扰布局，同时给<p>设置text-align: left让文字排版更整齐

兼容旧浏览器的备选方案（表格布局） #

如果需要兼容不支持Flexbox的旧浏览器，可以用表格布局来实现：

<div class="row">
  <div class="col-xs-12 text-center" style="display: table;">
    <p style="display: table-cell; vertical-align: middle; text-align: left; padding-right: 2rem;">
      初期費用 <br> 
      月額費用 <br>
      手続き料
    </p>
    <h3 style="display: table-cell; vertical-align: middle; margin: 0;">0<span>円</span></h3>
  </div>
</div>

这个方案通过模拟表格单元格的特性，让两个元素自动高度一致并垂直居中对齐。

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