0

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;


}

它开始烦人了！如何在buttonN中居中文本？

4

4 回答 4

3

我假设您正在寻找垂直对齐元素？

尝试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;
}

JSF中。

Text-aling:center将元素水平和vertical-align:middle 垂直居中。

于 2013-03-23T18:26:55.397 回答
0

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

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

工作示例

于 2013-03-23T18:27:46.007 回答
0

将此添加到您的CSS：

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

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

于 2013-03-23T18:28:14.227 回答
0

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

#button p{
     line-height:0px;
}
于 2013-03-23T18:28:34.767 回答