0

私はモバイル サイトに取り組んでおり、右側に小さなサムネイルとテキストを表示するページがいくつかあります: http://sunsetwesterngardencollection.com/mobile/the-collection

サムネイルは適切に配置されていますが、テキストは問題があります。いくつかの調査を行ったところ、1 つのオプションが見つかりましたが、正しく機能していないようです。

コンテンツの 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%;

これは少しファンキーに見えますが、画像の幅を変更することで行を調整できます。さて、私が持っている提案についてですが、インタラクティブタイプのドロップダウンに「orange-slice」を使用しているかどうかはわかりません。ただし、スタイリストの目的でのみ使用する場合は、次を追加することをお勧めします。

#plant.plants { border-bottom: 2px solid #e1562e; }
于 2013-06-20T18:19:02.623 に答える