如果两个元素在可变宽度包装器中，则垂直对齐两个元素[重复]

Question

我希望在段落的一侧有按钮，与该段落中的元素垂直对齐：

<div style="width:20%">
  This is an example text. This is an example text. This is an example text. This is 
  an example text. This is an <span>A</span> <button>Aligned with A</button> example text. This is an example text. 
  This is an example text. This <span>B</span> <button>Aligned with B</button> is an example text. This is an example 
  text. This is an example text. This is an example text. This <span>C</span><button>Aligned with C</button> is an
  example text. This is an example text. 
</div>

在这个例子中，我想让一个按钮与文本中的每个元素垂直对齐。我无法将垂直位置设置为固定，因为它们在文本中的行数随包装器 div 的实际宽度而变化，并且我不能使用 display: table 因为我不想在文本段落中换行。输出应如下所示：

由于包装器 div 的宽度由浏览器决定，我不知道换行的位置，因此不知道文本的垂直对齐方式。有没有办法将按钮与 div 中的特定元素对齐？

这与仅垂直对齐两列不同，因为文本段落断点独立于右侧按钮的出现。

Answer 1

您可以使用 display:table 属性并使您的 div 的行为类似于 HTML 表格。 请参阅文档https://www.w3schools.com/cssref/pr_class_display.asp

并使用vertical-align 对齐您的项目。

.paragraph-wrap {
  display: table;
}
.paragraph {
  display:table-row;
}
.paragraph > *{
  display:table-cell;
  vertical-align: middle;
}

<div class="paragraph-wrap">
  <div class="paragraph">
    <p>This is an example text.</p>
    <span><button>Button</button></span>
  </div>
  <div class="paragraph">
    <p>This is an example text.  This is an example text. This is an example text. This is an example text.</p>
    <span><button>Button</button></span>
  </div>
  <div class="paragraph">
    <p>This is an example text.</p>
    <span><button>Button</button></span>
  </div>
  <div class="paragraph">
    <p>This is an example text.</p>
    <span><button>Button</button></span>
  </div>
</div>