<分区>
html - 如果一个元素位于可变宽度包装器中，则垂直对齐两个元素
我想在段落的一侧放置按钮，并与该段落中的元素垂直对齐:
<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 因为我不想在文本段落中换行。输出应如下所示:
由于 wrapper div 的宽度是由浏览器决定的，我不知道换行的位置，因此不知道文本的垂直对齐方式。有没有办法将按钮与 div 中的特定元素对齐？
这与仅垂直对齐两列不同，因为文本段落断点与右侧按钮的出现无关。
最佳答案
您可以使用 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>关于html - 如果一个元素位于可变宽度包装器中，则垂直对齐两个元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51391345/