怎么让组件在行内垂直居中

要让组件在行内垂直居中，可以使用以下方法：

1. 使用 Flexbox 布局

<div class="container">
  <div class="item">
    <p>组件1</p>
  </div>
  <div class="item">
    <p>组件2</p>
  </div>
  <div class="item">
    <p>组件3</p>
  </div>
</div>

.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.item {
  display: flex;
  align-items: center;
}

在这个例子中，我们使用了一个包含了三个 `div` 标签的容器元素，并且为其设置了 `display: flex` 属性。这样可以将其子元素设置为 Flexbox 布局。

对于每一个子元素，我们设置了 `display: flex` 属性，并且使用 `align-items: center` 属性将其垂直居中。

2. 使用 table 和 vertical-align 属性

<div class="container">
  <div class="item">
    <p>组件1</p>
  </div>
  <div class="item">
    <p>组件2</p>
  </div>
  <div class="item">
    <p>组件3</p>
  </div>
</div>

.container {
  display: table;
  width: 100%;
}

.item {
  display: table-cell;
  vertical-align: middle;
}

在这个例子中，我们使用了一个包含了三个 `div` 标签的容器元素，并且为其设置了 `display: table` 属性。这样可以将其子元素设置为 table 布局。

对于每一个子元素，我们设置了 `display: table-cell` 属性，并且使用 `vertical-align: middle` 属性将其垂直居中。

需要注意的是，使用 table 布局可能会带来一些不必要的样式问题。因此，推荐使用 Flexbox 布局来实现组件在行内垂直居中。