0

テキストを要素の中央に表示しようとしていますが、垂直方向に配置できないようです。

jsfiddle を作成しました: http://jsfiddle.net/bz8Gn/矢印をさらに上に移動する必要があります。

私は試しましたvertical-align:middle（そしてトップ）

.cont {
    width:25px;
    cursor:pointer;
    border:solid 1px gray;
    height:12px;
    border-radius:10px;
    text-align:center;
}

.arrow {
    font-size:18px;
}

<div class = "cont">
    <span class = "arrow">&#8658</span>
</div>
4

5 に答える 5

1

これを試してください

.arrow {
    display: block;
    font-size: 18px;
    line-height: 10px;
}

line-heightテキストを垂直方向の中央揃えに設定する場合は、CSS でを設定する必要があります。これは、この状況でのみ機能します。

line-height矢印の高さを の高さと同じに設定しようとしました.contが、結果は...実際には整列していませんでした。

デモ: http://jsfiddle.net/jlratwil/49cjg/

于 2013-06-18T07:08:30.053 に答える
0

ここを見てください：http://jsfiddle.net/bz8Gn/5/

5px相対位置を使用してオブジェクトを上に移動します

コード

.cont {
    width:25px;
    cursor:pointer;
    border:solid 1px gray;
    height:12px;
     border-radius:10px;
    text-align:center;
    position: relative;
}
.arrow {
    font-size:18px;
    position: relative;
    top: -5px;
}
于 2013-06-18T07:08:00.180 に答える
-1

vertical-alignブロック要素でのみ機能します。それがどのように機能するかを説明するために、高さを設定しました。

于 2013-06-18T07:07:20.383 に答える