0

私は次のcssを持っています:

#header-notification 
{
    color: #7B6F60;
    font-size: 13px;
    font-weight: bold;
    float: left;
    text-align: center;
    vertical-align: middle;

    height: 20px;
    width: 20px;
    background-color: #E5E5E5;
}

ラベルを次のように宣言しました。

  <label id="header-notification"></label>

ただし、そうすることで次のことがわかります。

ここに画像の説明を入力

ご覧のとおり、ここのテキストは垂直方向の中央揃えではありません。私は何を間違っていますか？

4

3 に答える 3

3

単一の文字を使用しline-heightて垂直方向に整列しているため、ここでプロパティを使用して要素の中央に垂直方向に整列できます

デモ

#header-notification {
    color: #7B6F60;
    font-size: 13px;
    font-weight: bold;
    float: left;
    text-align: center;
    vertical-align: middle;
    height: 20px;
    width: 20px;
    background-color: #E5E5E5;
    line-height: 20px;
}

作業を行うには、垂直方向の中央に配置するようvertical-align: middle;に使用する必要があります..しかし、単一の文字を配置しようとしていると指定したので、ここでは必要ありません。メソッドは通常、要素内で段落全体または画像を垂直方向に配置する場合に使用されます。display: table-cell;display: table-cell;

于 2013-07-25T12:38:11.903 に答える
1

これを試してみてください: http://jsfiddle.net/jplahn/7zwUc/

親 div 内に配置する必要があります。(vertical-align を使用したい場合。明らかに他の方法もあります)。

HTML:

<div id="header-notification"> 
    <label id="number">0</label>
<div>

CSS:

#header-notification 
{
    color: #7B6F60;
    font-size: 13px;
    font-weight: bold;
    float: left;
    text-align: center;

    height: 20px;
    width: 20px;
    background-color: #E5E5E5;
}

#number {
    vertical-align: middle;
}
于 2013-07-25T12:38:50.670 に答える
0

display: table-cell要素に追加してみてください:

#header-notification 
{
    display: table-cell;
    color: #7B6F60;
    font-size: 13px;
    font-weight: bold;
    float: left;
    text-align: center;
    vertical-align: middle;   
    height: 20px;
    width: 20px;
    background-color: #E5E5E5;
}
于 2013-07-25T12:36:44.220 に答える