0

我在一个移动网站上工作，我有几个页面显示一个带有右侧文本的小缩略图：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;
     }

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

谢谢！

4

2 回答 2

3

您将其line-height设置为与文本所在元素的高度相同。

于 2013-06-20T18:05:58.593 回答
1

你不需要 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-20T18:19:02.623 回答