在同一线条中填充底部和顶部

在网页设计中，有时需要在同一行中填充底部和顶部，同时保持元素水平居中。CSS 提供了一种简单的方法来实现这个效果。

使用方法

在 CSS 中，可以使用以下属性来实现在同一线条中填充底部和顶部：

display: inline-block;
vertical-align: middle;

将元素的 display 属性设置为 inline-block，可以将它放置在同一行。然后，将 vertical-align 属性设置为 middle，就可以让元素在垂直方向上居中。

以下是示例 CSS 代码：

.element {
  display: inline-block;
  vertical-align: middle;
}

示例

以下是一个使用上述 CSS 属性的基本示例：

<div class="wrapper">
  <div class="box">
    <p class="element">这是一个段落文本。</p>
    <img class="element" src="https://via.placeholder.com/150x150" alt="占位图">
  </div>
</div>

.wrapper {
  text-align: center;
}

.box {
  display: inline-block;
}

.element {
  display: inline-block;
  vertical-align: middle;
  margin: 10px;
}

效果如下：

总结

使用 display: inline-block 和 vertical-align: middle，可以在同一行中填充底部和顶部，同时保持元素水平居中。这个技巧对于网页排版非常有用。