html - ボタンの中央にあるテキスト-中央に配置できません

Question

http://jsfiddle.net/8zkqu/1/

            <div id="button" class="g">
                <p>Discover me!</p>
            </div> <!-- id button class g -->

と.cssファイルはそのように見えます

#button{

    z-index: 1;
    font-size: 20px;
    border-radius: 5px;
    width: 130px;
    height: 40px;
    position: absolute;
    top:20px;
    right: 20px;
    font-weight:  bold;
    text-align: center;
}
.g {
    background-color: rgb(94,179,74);
    color: white;
    border: 3px solid green;
    position: absolute;


}

迷惑になり始めました！buttoN内のテキストを中央に配置する方法は？

Answer 1

要素を垂直方向に揃えようとしていると思いますか？

で試してみてくださいdisplay:table-cell

HTML

<div id="button" class="g">
    <span>Discover me!</span>
</div> <!-- id button class g -->

CSS

#button{
    z-index: 1;
    font-size: 20px;
    border-radius: 5px;
    width: 130px;
    height: 40px;
    display:table-cell;
    vertical-align:middle;
    font-weight:  bold;
    text-align: center;
}

.g {
    background-color: rgb(94,179,74);
    color: white;
    border: 3px solid green;
}

JSFiddle。

Text-aling:center要素を水平およびvertical-align:middle 垂直の中央に配置します。

Answer 2

このCSSの更新により、次のようなトリックが実行されます。

.g p {
    margin: 0;
    line-height: 40px;
}

実例

Answer 3

これをCSSに追加します。

#button p{    
margin: 0px;
line-height: 40px;
}

マージンは<p>デフォルトで要素に追加され、上記のコードはそれらを削除します。また、行の高さはボタンのテキストを中央に配置します。これを将来実現するには、行の高さをボタンの高さと同じに設定します。

Answer 4

別のオプション：これをCSSに追加します：

#button p{
     line-height:0px;
}