Css 当文本不在表格单元格中时，如何垂直对齐？

我在一个移动网站上工作，我有两个页面显示一个小缩略图，右侧有文本：

缩略图的位置很好，但文本受到质疑。我做了一些研究，发现了一个选择，但它似乎没有正常工作

以下是内容的HTML：

<ul id="plants">

<li class="plant">
<a href="http://sunsetwesterngardencollection.com/mobile/plant/amistad-salvia"><img src="http://sunsetwesterngardencollection.com/photos/thumbnails/salvia_amistad_thumb.jpg" alt="&#8216;Amistad&#8217; Salvia"  />
<span class="plant-name">&#8216;Amistad&#8217; Salvia</span></a>
<div class="orange-slice"></div>
</li>

<li class="plant">
<a href="http://sunsetwesterngardencollection.com/mobile/plant/black-adder-phormium"><img src="http://sunsetwesterngardencollection.com/photos/thumbnails/phormium_black_adder_thumb.jpg" alt="&#8216;Black Adder&#8217; Phormium"  />
<span class="plant-name">&#8216;Black Adder&#8217; Phormium</span></a>
<div class="orange-slice"></div>
</li>

<li class="plant">
<a href="http://sunsetwesterngardencollection.com/mobile/plant/blue-riding-hood-penstemon"><img src="http://sunsetwesterngardencollection.com/photos/thumbnails/penstemon_blue_riding_hood_thumb.jpg" alt="&#8216;Blue Riding Hood&#8217; Penstemon"  />
<span class="plant-name">&#8216;Blue Riding Hood&#8217; Penstemon</span></a>
<div class="orange-slice"></div>
</li>
</ul>

当文本不在表格单元格中时，垂直对齐文本的正确方法是什么

---

谢谢

使

行高度与文本所在元素的高度相同。
使
行高度与文本所在元素的高度相同。
不需要JAVASCRIPT

所以在看过你的代码之后，我有了一个解决方案和一些建议

首先，让我们看看您可以做些什么来解决此问题：
让我们将以下内容添加到css中，使列表项的行为类似于表

#plant.plants { display: table;}

之后，让我们关注您的包含锚：

#plant.plants a { display: table-row;}

最后，让我们讨论一下你所说的文字：

#plant.plants a span { display: table-cell;}

删除您当前在所述范围上的以下规则

//remove
position: absolute;
top: 25%;
left: 23%;

现在这看起来有点怪，但是你可以通过改变你的图片宽度来调整你的行。现在我有一个建议，我不确定你是否使用“orange slice”作为交互类型下拉列表。但如果您只是出于设计师的目的，我建议您添加：

#plant.plants { border-bottom: 2px solid #e1562e; }

您不需要JAVASCRIPT就可以做到这一点

所以在看过你的代码之后，我有了一个解决方案和一些建议

首先，让我们看看您可以做些什么来解决此问题：
让我们将以下内容添加到css中，使列表项的行为类似于表

#plant.plants { display: table;}

之后，让我们关注您的包含锚：

#plant.plants a { display: table-row;}

最后，让我们讨论一下你所说的文字：

#plant.plants a span { display: table-cell;}

删除您当前在所述范围上的以下规则

//remove
position: absolute;
top: 25%;
left: 23%;

现在这看起来有点怪，但是你可以通过改变你的图片宽度来调整你的行。现在我有一个建议，我不确定你是否使用“orange slice”作为交互类型下拉列表。但如果您只是出于设计师的目的，我建议您添加：

#plant.plants { border-bottom: 2px solid #e1562e; }

有时，比包含元素的总高度短1px是可取的。您是指线条高度吗？一般来说，这是有效的-尤其是在固定高度的情况下。在响应式设计的情况下，有什么可以修改的吗？如果文本最终被包装，这个解决方案就不能很好地工作。您可以添加javascript来查找元素的偏移，并将行高度设置为该值。如果它最终被包裹，您可以将高度设置为元素的一半。有时，需要比包含元素的总高度短1px。您是指线条高度吗？一般来说，这是有效的，尤其是在固定高度的情况下。在响应式设计的情况下，有什么可以修改的吗？如果文本最终被包装，这个解决方案就不能很好地工作。您可以添加javascript来查找元素的偏移，并将行高度设置为该值。如果它确实结束换行，您可以将高度设置为元素的一半。您不需要表行元素，甚至不需要表元素，只需要表单元格即可：@cimmanon如果事先清除了“锚”，我同意您的意见。通过实现“表行”，您可以得到清晰的结果，因为他正在浮动图像。那么是否删除浮动？如果您修改了标记，这里就不需要了。您不需要表行元素，甚至不需要表元素，只需要表单元格即可：@cimmanon如果事先清除了“锚点”，我同意您的看法。通过实现“表行”，您可以得到清晰的结果，因为他正在浮动图像。那么是否删除浮动？如果您修改标记，则此处不需要。相关：良好解释：相关：良好解释：