Question

我有以下CSS和Button设置来在我的项目中创建按钮。然而，他们现在希望所有按钮具有相同的宽度，并且不会根据文本的大小而增长。他们希望文本包装。我有文字包装和相同的宽度和高度，固定的宽度和高度，但它将按钮移动到奇怪的地方，中心的文本需要向上移动所以它仍然集中（如果这是有道理的！）< / p>

http://www.screenup.info/uploads/4548070.jpeg就是它如何出现的一个例子。当你看到他们已经跳到了整个地方，文字在它包裹时不在中间。

jsFiddle：http://jsfiddle.net/DqUfx/

.dark-orange-button
{
    -moz-box-shadow: inset 0px 1px 0px 0px #fed897;
    -webkit-box-shadow: inset 0px 1px 0px 0px #fed897;
    box-shadow: inset 0px 1px 0px 0px #fed897;
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #f6b33d), color-stop(1, #d29105) );
    background: -moz-linear-gradient( center top, #f6b33d 5%, #d29105 100% );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= '#f6b33d' , endColorstr= '#d29105' );
    background-color: #f6b33d;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    border-radius: 9px;
    border: 3px solid #eda933;
    display: inline-block;
    color: #ffffff;
    font-family: arial;
    font-size: 15px;
    font-weight: bold;
    width: 300px;
    height: 18px;
    text-align:center;
    padding: 23px 56px;
    text-decoration: none;
    text-shadow: 1px 1px 0px #cd8a15;
}

.dark-orange-button:hover
{
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d29105), color-stop(1, #f6b33d) );
    background: -moz-linear-gradient( center top, #d29105 5%, #f6b33d 100% );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr= '#d29105' , endColorstr= '#f6b33d' );
    background-color: #d29105;
}

.dark-orange-button:active
{
    position: relative;
    top: 1px;
}

Answer 1

要修复错位，请将vertical-align: top添加到display: inline-block。

http://jsfiddle.net/thirtydot/DqUfx/1/

如果您不需要支持IE6 / 7，则可以轻松地将多行文本垂直居中 - 使用display: table-cell。

http://jsfiddle.net/thirtydot/DqUfx/2/

如果您确实需要支持IE6 / 7，请查看here或here。

在CSS按钮和文本中包装文本奇怪的身高问题

1 个答案: