当文本不在表格单元格中时，如何垂直排列文本？

我工作的一个移动网站，我有几个与文本到右边显示一个小缩略图页面：http://sunsetwesterngardencollection.com/mobile/the-collection 当文本不在表格单元格中时，如何垂直排列文本？

缩略图位置很好，但文本挑战。我做了一些研究并找到了一个选择，但它似乎不能正常工作。

下面是内容的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>

这里是CSS：

ul#plants li { 
    width: 100%; 
    height: auto; 
    position: relative; 
} 

.orange-slice { 
    width: 100%; 
    height: 2px; 
    clear: both; 
    background: #e1562e; 
} 

ul#plants li img { float: left; width: 20%; margin: 0; } 

ul#plants li span, 
ul#plants li span a:link, 
ul#plants li span a:visited { 
    color: #e1562e; 
    font-size: 1.3em; 
    font-weight: 500; 
    position: absolute; 
    top: 25%; 
    left: 23%; 
    text-transform: uppercase; 
    display: table-cell; 
    vertical-align: middle; 
    }

什么是垂直对齐文本时，它不是在一个表格单元格的正确方法？

谢谢！

来源

2013-06-20 fmz

相关：http://stackoverflow.com/questions/4005309/div-table-cell-vertical-align-not-working很好的解释： http://css-tricks.com/centering-in-the-unknown/ –

您做出line-height一样的文本是元素的高度。

来源

2013-06-20 18:05:58

有时，比包含元素的总高度短1px是可取的。 – orokusaki

你的意思是行高？ – fmz

一般来说，这种方法有效 - 特别是在固定高度时。在响应式设计的情况下是否需要修改？ – fmz

你不需要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%;

现在看起来有点时髦，但您可以通过更改图像宽度来调整行。现在根据我的建议，我不确定您是否使用交互式类型的“橙片”下拉菜单。但是，如果你只是利用了设计师的目的，我建议只加：

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

来源

2013-06-20 18:19:02 Starboy

你不需要一个表格行元素或表格元素，只需要表格单元格就可以：http://cssdeck.com/labs/0vkoyhrc – cimmanon

@cimmanon我同意你的观点如果'锚'是在手前清除。通过实施“表格行”，您可以清晰地显示图片。 – Starboy

那么去掉浮子？如果您修改标记，这里没有必要。 – cimmanon

当文本不在表格单元格中时，如何垂直排列文本？

回答

相关问题