如何对齐跨度旁边的中心文本？ [复制]

Posted 2023-03-06

【中文标题】如何对齐跨度旁边的中心文本？ [复制]

【英文标题】：How to align center text that next to a span? [duplicate]

【发布时间】：2021-12-25 20:53:45

【问题描述】：

我正在尝试将“每月”垂直对齐到价格“29 美元”，就像图片一样。您可以帮助我修复我的代码或给我一个更适合我的新方法。

这就是我想要的。

这就是我所拥有的

这是我的 html 代码。

  <div class="deal">
          <span class="price">&dollar;29</span>
          <span class="period">per month</span>
        </div>

还有我的 CSS。

.price 
  font-size: 50px;

.monthly 
  color: #d0d3d4;
  vertical-align: middle;
  display: inline-block;

【参考方案1】：

.deal 
display: inline-flex;
align-items: center;

【参考方案2】：

CSS

.deal
  display:flex;
  align-items:center;

.period
  margin-left:0.5rem;

jsfiddle

【讨论】：

我试过你的代码，它可以工作，但是当我删除 margin-left:0.5rem;它仍然可以完美运行。你能解释一下 margin-left:0.5rem 是做什么的吗？

因为离彼此太近所以我写这个 magin-left:0,5rem;