对齐文本中线降价

对齐文本中线降价是一种常见的排版技巧。通常情况下，我们希望一组文本的中心线对齐，这样可以让页面看起来更加协调美观。在页面中，我们还经常需要将价格标记在文本中，此时我们也希望价格能够与文本的中心线对齐，这样可以让页面显得更加整洁。下面介绍如何在程序中实现对齐文本中线和价格的排版效果。

对齐文本中线

在 HTML 中，我们可以用 <div> 元素包裹一组文本，并设置 display: inline-block 的样式以让其水平排列。然后，我们可以设置 line-height 的值与 div 元素的高度相等，这样文本的中心线就会对齐了。

<div style="display: inline-block; height: 100px; line-height: 100px;">
  <p>文本1</p>
  <p>文本2</p>
  <p>文本3</p>
</div>

在 CSS 中，我们可以使用 flexbox 来实现对齐文本中线的效果。我们可以将一组文本包含在一个 flex 容器内，通过设置 align-items: center 属性使文本的中心线对齐。示例代码如下：

.container {
  display: flex;
  align-items: center;
  height: 100px;
}

.text {
  margin: 0 20px;
}

<div class="container">
  <p class="text">文本1</p>
  <p class="text">文本2</p>
  <p class="text">文本3</p>
</div>

对齐价格

对于价格的排版，我们可以通过在价格的前面或后面添加一个占位符来实现对齐。使用占位符可以让价格标记在文本的同一水平线上，同时又不会影响价格的显示效果。

在 HTML 中，我们可以使用   实体来添加占位符，如下所示：

<p>原价：<span>100元</span></p>
<p>优惠价：<span>50元&nbsp;</span></p>

在 CSS 中，我们可以使用 ::before 或 ::after 伪元素来添加占位符。示例代码如下：

.price {
  position: relative;
}

.price span {
  position: relative;
  z-index: 1;
}

.price::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #000;
  z-index: 0;
}

<p>原价：<span class="price"><span>100元</span></span></p>
<p>优惠价：<span class="price"><span>50元</span></span></p>

通过上述方法，我们可以很方便地实现对齐文本中线和价格的排版效果。