多个行内元素在同一行垂直居中的几种方式

有几种方法可以实现多个行内元素在同一行垂直居中的效果，以下是其中几种常见的方式：

1. 使用 `display: flex` 和 `align-items: center`：将行内元素的父容器设置为弹性容器，并使用 `align-items: center` 属性来垂直居中行内元素。

   <div style="display: flex; align-items: center;">
     <span>文本1</span>
     <span>文本2</span>
   </div>

2. 使用 `display: inline-block` 和 `vertical-align: middle`：将行内元素设置为 `display: inline-block`，并使用 `vertical-align: middle` 属性来垂直居中行内元素。

   <span style="display: inline-block; vertical-align: middle;">文本1</span>
   <span style="display: inline-block; vertical-align: middle;">文本2</span>

3. 使用绝对定位和负边距：将行内元素设置为绝对定位，并使用负边距来使其垂直居中。

   <div style="position: relative;">
     <span style="position: absolute; top: 50%; transform: translateY(-50%);">文本1</span>
     <span style="position: absolute; top: 50%; transform: translateY(-50%);">文本2</span>
   </div>

4. 使用表格布局：将行内元素放置在一个 `<table>` 中，并使用表格的属性来垂直居中。

   <table>
     <tr>
       <td style="vertical-align: middle;">文本1</td>
       <td style="vertical-align: middle;">文本2</td>
     </tr>
   </table>

请注意，这些方法可能会根据具体情况和需求而有所变化。根据实际情况选择适合的方式来实现多个行内元素在同一行垂直居中。