プロジェクトでボタンを作成するために、次の 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;
}