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

我假设您正在寻找vertical-align元素？

尝试使用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将元素 horinzontal 和vertical-align:middle vertical 集中在一起。

Answer 2

对CSS的这种更新应该可以解决问题：

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

Working Example

Answer 3

将此添加到您的css：

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

默认情况下，边距会添加到<p>元素，上面的代码会将其删除。并且行高将按钮中的文本居中，为了在将来实现这一点，将行高设置为等于按钮高度。

Answer 4

另一种选择：将其添加到CSS：

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

按钮中间的文字 - 无法居中

4 个答案: