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 に答える