21

ここでトリッキーな問題があります。ボタン内のテキストを垂直方向に揃えたい

<button id="rock" onClick="choose(1)">Rock</button>

そして、ここに私のCSSがあります

button {
    font-size: 22px;
    border: 2px solid #87231C;
    border-radius: 100px;
    width: 100px;
    height: 100px;
    color: #FF5A51;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
button:active {
    font-size: 22px;
    border: 2px solid red;
    border-radius: 100px;
    width: 100px;
    height: 100px;
}

ここで確認できますhttp://jsfiddle.net/kA8pp/。一番下に文字を入れたい。どうもありがとうございました！

編集：うまく説明できないので、ここに写真があります:)

ここに画像の説明を入力

4

5 に答える 5

26

line-height目的を達成するために使用できます。

button {
    font-size: 22px;
    border: 2px solid #87231C;
    border-radius: 100px;
    width: 100px;
    height: 100px;
    color: #FF5A51;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    line-height: 150px;
    overflow: visible;
}

http://jsfiddle.net/kA8pp/2/

于 2013-03-18T21:42:49.750 に答える
10

padding-top:65px;ボタンクラスで試す 

button {
    font-size: 22px;
    border: 2px solid #87231C;
    border-radius: 100px;
    width: 100px;
    height: 100px;
    color: #FF5A51;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    padding-top:65px;
}

JS フィドルのデモ

于 2013-03-18T21:42:56.383 に答える
2

ボタンのスタイルの違い: スタイリングのバリエーション

この<button>要素は、 a などの他の要素とは少し異なる動作をします<div>。ボタンに設定display: table-cellすると、レイアウトに影響を与えないためvertical-align、テキストの位置を制御できます。

一方、次のことができます。 

<div class="button" id="rock" onClick="choose(1)">Rock</div>

次の CSS を使用します。

.button {
    font-size: 22px;
    border: 2px solid #87231C;
    border-radius: 100px;
    width: 100px;
    height: 90px;
    color: #FF5A51;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    display: table-cell;
    vertical-align: bottom;
    text-align: center;
    padding-bottom: 10px;
}

この場合、パディングと高さを調整することである程度制御できます。

JavaScript アクションを要素にバインドしている場合、タグが div かボタンかはそれほど重要ではありません。

このアプローチは、特定の状況でいくつかの利点があります。

上記の CSS をボタンタグに適用すると機能しません。知っておくと良い。

http://jsfiddle.net/audetwebdesign/QSap8/

于 2013-03-18T21:59:12.867 に答える