2

アンカー内の要素を垂直方向に中央に揃えるソリューションを探しています。

通常、名前と数値は両方とも同じ表のセルにあり、全体としてクリック可能でなければなりません。名前は左揃え (floated)、数値は右揃え (text-align) にする必要があります。

私はこのソリューションを使用しています: http://jsbin.com/edecofここでは、名前が長すぎて 1 行に収まらないまで、すべてが正常に機能します。2 行以上に分割された場合、浮動要素がアンカーをオーバーフローするため、数値は垂直方向に上部に配置されたままになります。アンカーをテーブルセルの高さ100％にするという課題に直面していることは明らかです。clearfix 要素を追加しても役に立ちません。前後の表を含む clearfix ソリューションを追加しても役に立ちません。

期待される結果は、数字も真ん中に揃えることです。

何か案は？

4

3 に答える 3

2

これは、垂直方向に配置する必要がある問題の解決策です。

HTML:

<table>
  <tr><td><a href="#"><strong>A man without a name</strong><span>188 cm</span></a></td></tr>
</table>

CSS:

td {border: 1px solid #000; width: 150px; text-align: right;  border-collapse: collapse;}
  td a {display: table-row; text-decoration: none; color: #333; background: #f90; vertical-align:middle;}
    td a strong {width: 60%; display: table-cell; text-align: left;}
td a span{display: table-cell;
    vertical-align: middle;}

ロジック:

問題の課題、つまり 188cm に縦方向の位置合わせを追加するには、個別に作成するか、個別table-cellに作成したくない場合tagは共存する必要がある を追加する必要があります。この場合、spanタグの間でラップする必要があります。

お役に立てれば。

于 2013-06-10T08:49:23.043 に答える
0

これの鍵は通常、line-heightCSS のプロパティとvertical-align:middle. (JS: .lineHeight, .verticalAlign)

line-height単位は px で、親の高さに等しくなければなりません。要素を に設定する必要があるかもしれませんが、eddisplay:blockであればfloatすぐに機能すると思います。

HTML DOM は100% の高さに苦労することで有名です。ほとんどの (すべて?) ソリューションは、親に明示的なピクセルの高さがないと失敗します。

ページがレンダリングされた後に Javascript を使用して、子.lineHeightをそのに一致させることができますparentNode.offsetHeight。

編集

JS ソリューションをさらに詳しく説明するには、次のようなものから始めることができます。

var element = document.getElementById('yourelement');
var h = element.parentNode.offsetHeight + 'px';
element.style.height = h;
element.style.lineHeight = h;
于 2013-06-10T08:44:11.470 に答える