1

アンカー内でテキストを垂直方向に整列し、メソッドをクロスブラウザー互換（つまり7+）にするための最良の方法についてブレインストーミングしようとしています。私がこれまでに思いついた最善の方法は、アンカー内に偽の要素を作成してから、アンカーのコンテンツをスパンでラップすることです（これ<ins>は単なるインライン要素です）。

<a href="#"><ins></ins><span>blah</span></a>

通常、単純なパディングでこれを実現できますが、私のテストケース（http://jsfiddle.net/2jnSP/1/）では、アンカーの1つに複数行のテキストがあります。

ですから、もっと良いアイデアがあれば、そこに捨ててください！

4

1 に答える 1

0

編集：

ここで例を作成しました: http://jsfiddle.net/Egqjf/1/。

IE < 8 では条件付きコメントを使用しdisplay: table、最新のブラウザではその他を使用します。

これは、あなたが持っている要素に適応させることができます。

HTML:

<!--[if lt IE 8]>
<style type="text/css">
.inner {
    position: absolute;
    top: 50%
}
.content {
    position: relative;
    top: -50%
}
</style>
<![endif]-->
<div class="wrapper">
    <!--[if lt IE 8]>
    <div class="inner">
    <![endif]-->
        <div class="content">
            <div>blah blah (line 1)</div>
            <div>lorem ipsum (line 2)</div>
        </div>
    <!--[if lt IE 8]>
    </div>
    <![endif]-->
</div>

CSS:

.wrapper {
    display: table;
    position: relative;
    width: 150px;
    height: 200px;
    background: green
}
.content {
    display: table-cell;
    vertical-align: middle
}

おそらくこの質問には役に立たないが、他の人には役立つかもしれない元の答え：

HTML:

<a href="#">blah</a>

CSS:

a {
    display: block;
    height: 50px;
    line-height: 50px
}
于 2012-08-02T02:30:49.700 に答える