0

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

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;
}
4

1 回答 1

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，请查看此处或此处。

于 2012-06-20T10:34:04.910 回答