0

cssでバッジ/ボタンなどを作るとき。私は通常、パディングを使用して要素内にテキストを配置します。私は今、これがうまくいかない状況に出くわしました。

pタグの高さは50pxです。これは、パディングを追加すると、全高が大きくなることを意味します。タグ内のテキストの位置を変更する他の方法はありますか？

4

2 に答える 2

0

テキストを垂直または水平に移動する必要がありますか? 水平方向の場合、text-indent を使用できます。

コンテナーの垂直方向の中央にテキストを配置する必要があり、テキストが 1 行しかない場合は、line-height プロパティを要素の高さと同じに設定できます。

正確な詳細またはコード サンプルを提供してください。

于 2012-11-03T19:19:03.923 に答える
0

高さを使用する必要はありません。以下のようなものを使用して、これを正しく行うことができます。

.classname {
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
    background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
    background-color:#ededed;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#777777;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    padding:16px 33px;
    text-decoration:none;
    text-shadow:1px 1px 0px #ffffff;
}.classname:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
    background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
    background-color:#dfdfdf;
}.classname:active {
    position:relative;
    top:1px;
}

デモ

于 2012-11-03T19:19:30.283 に答える