1

position:relative; の div があります。固定幅の div に含まれます。その中に (相対位置の div)、いくつかのテキストがあります。問題は、縦方向に中央揃えする必要があり、テキストが 1 行で構成されている場合と 2 行で構成されている場合があることです。私のcssコードはこれです：

.rollover{
position: relative;
width: auto;
background-color: #000;
opacity: 0.5;
height: 40px;
overflow: hidden;
padding-left: 10px;
}

.rollover a{
font-family: lucida;
font-size: 10px;
color: #FFF;
display: block;
line-height: 11px;
float: left;
text-decoration: none;
}

私のhtmlコードは次のとおりです。

<div class="rollover">
    <a href="">ONE LINE TEXT</a>
</div>

また

<div class="rollover">
    <a href="">FIRST LINE<br/>SECOND LINE</a>
</div>

どのようにできるのか？

ありがとう、マティア

4

1 に答える 1

4

最近問題に直面したので、私が思いついた解決策（使用できない場合にそれを行う必要がある場合display:table-cell）は、少しマークアップを追加してline-heightプロパティを使用することです。

line-height行が1つしかない場合は、外側のdivだけで正常に機能します。複数行になる可能性のあるものに直面した場合、解決策は2行の高さを使用することです。

使用されるマークアップは次のとおりです。

<div class="rollover">
    <span>
         <a href="">ONE LINE TEXT</a>
    </span>
</div>
<div class="rollover">
    <span>
         <a href="">FIRST LINE<br/>SECOND LINE</a>
    </span>
</div>​

追加されたに注意してください<span>。

秘訣は、スパンが40pxラインの高さ（rolloverdivから継承）のラインになることです。また、floatプロパティもあります。浮動要素では、を使用できないためvertical-alignです。そのスパンの内側に、11pxの線の高さと垂直方向の位置合わせ中央のリンクがあります。それがスパンの真ん中です。そして、そこにあります。

必要なCSSは次のとおりです。

.rollover{
    position: relative;
    width: auto;
    background-color: #000;
    opacity: 0.5;
    height: 40px;
    overflow: hidden;
    padding-left: 10px;
    line-height:40px;
}

.rollover span{
    float: left;
}
.rollover a{
    font-family: lucida;
    font-size: 10px;
    color: #FFF;
    line-height: 11px;
    text-decoration: none;
    vertical-align:middle;
    display:inline-block;    
}

blockaの表示をからに変更したことに注意してください。inline-blockそれ以外の場合はnovertical-alignです。

そしてそれを示すためのちょっとしたフィドル：http：//jsfiddle.net/r5RFx/（ページ上のブロックを見るためにいくつかの境界線を追加しました）

于 2012-05-07T17:38:45.663 に答える