Question

我用CSS创建了一个圆形边框按钮：

.round-button {
    display:block;
    width:100px;
    height:100px;
    line-height:100px;
    border:2px solid #29966c;
    border-radius: 50%;
    color:#FFF;
    text-align:center;
    text-decoration:none;
    background: #FFFFFF;
    box-shadow: 0 0 3px gray;
    font-size:20px;
    font-weight:bold;           
}

并在html5中使用它：

<div align="center">
    <a href="#" class="round-button">
        <font color="#29966c" id="demo"></font>
    </a>
</div>

现在我想在圆形按钮内创建一个换行符，

<div align="center"> 
    <a href="#" class="round-button">
         <font color="#29966c" id="demo">hello <br />world</font>
    </a>
</div>

所以，＆＃34;世界＆＃34;从圆形按钮出来。

我希望两个单词都在不同的行，但它们都会保留在圆形按钮窗口内。

Answer 1

当您的line-height等于{c}中的width时，“世界”就会出现在圆形按钮中。如果您将line-height设置为50px，则会在按钮中获得垂直中间对齐的文字。

Answer 2

问题是＆＃34;行高：100px;＆＃34;将第二行推向100px，试试这个：

.round-button{
    display:block;
    width:100px;
    height:80px;
    padding-top: 20px;
    border:2px solid #29966c;
    border-radius: 50%;
    color:#FFF;
    text-align:center;
    text-decoration:none;
    background: #FFFFFF;
    box-shadow: 0 0 3px gray;
    font-size:20px;
    font-weight:bold;
}

您可能需要摆弄高度和填充以从顶部获得正确的偏移。请记住，高度不包括填充，因此从高度中减去填充。

Answer 3

你的行高是100px。这样做：

http://jsfiddle.net/VS7sJ/

.round-button {
    display:block;
    width:100px;
    height:100px;
    line-height:1em;
    border:2px solid #29966c;
    border-radius: 50%;
    color:#FFF;
    text-align:center;
    text-decoration:none;
    background: #FFFFFF;
    box-shadow: 0 0 3px gray;
    font-size:20px;
    font-weight:bold;
}
span {
    padding:20px 0 0;
    display:block
}

line-height:1em并将文字换成span

<div align="center"> <a href="#" class="round-button"><span><font color="#29966c" id="demo">hello <br />world</font></span></a>
</div>

Answer 4

正如其他人所提到的，line-height:100px表示每行文字都应该是100px高。这将垂直居中一行文本（如果容器也是100px高），但如果它大于2行文本则不起作用。

要将内容垂直居中，无论它有多少行，您都可以使用：

display: table-cell;
vertical-align: middle;

小提琴：http://jsfiddle.net/PDPTV/

（注意：HTML5不支持<font>标记。接下来，您应该使用CSS来指定字体颜色。属性align=center也不受支持，因此您应该使用其他技术集中你的内容，但这是关于堆栈溢出的整个其他主题。）

Answer 5

它的线高问题。因为高度为100px，行高也是100像素，这就是它显示按钮的原因。

.round-button {
    display:block;
    width:100px;
    height:100px;
    line-height:50px;
    border:2px solid #29966c;
    border-radius: 50%;
    color:#FFF;
    text-align:center;
    text-decoration:none;
    background: #FFFFFF;
    box-shadow: 0 0 3px gray;
    font-size:20px;
    font-weight:bold;

}

您还可以使用下面给出的代码将单词保持在中心位置。

.round-button {
    display:block;
    width:100px;
    height:75px;
    padding-top:25px;
    line-height:25px;
    border:2px solid #29966c;
    border-radius: 50%;
    color:#FFF;
    text-align:center;
    text-decoration:none;
    background: #FFFFFF;
    box-shadow: 0 0 3px gray;
    font-size:20px;
    font-weight:bold;

}

圆形按钮内的换行符不起作用

5 个答案: