1

そのため、私が抱えているこの問題を解決するために、stackoverflow.com や他のさまざまな Web サイトでさまざまな質問をいくつか検索しました。見つけたものすべてを試してみましたが、うまくいきませんでした。CSS を使用して、Web サイトで使用するこれらのボタンのスタイルを設定していますが、Firefox でテキストを垂直方向の中央に配置できません。これは、Google Chrome と Internet Explorer を中心にしています (クレイジーですよね)。ただし、フィドルでは、Google Chrome でもテキストが垂直方向に中央揃えされていないように見えます。

CSSは次のとおりです。

button {
    margin: 0;
    padding: 0;
}
button.slide_button {
    background-color: #E3E4F0;
    border: 1px #8C8C8C solid;
    border-radius: 25px;
    height: 25px;
    padding: 0px 5px;
    vertical-align: middle;
    line-height: 25px;
}
button.slide_button:hover {
    background-color: #E3E4F0;
    border: 1px #8C8C8C solid;
    border-radius: 25px;
    height: 25px;
    color: #F00;
}
button.slide_button:active {
    background-color: #BFBFE3;
    border: 1px #8C8C8C solid;
    border-radius: 25px;
    height: 25px;
}

これがHTMLです（サイトで使用するJavascript関数への参照が含まれています）：

<button id="slide_prev" class="slide_button" onClick="prevImg()">Previous</button>
<button id="slide_pause" class="slide_button" onClick="pauseShow()">Pause</button>
<button id="slide_next" class="slide_button" onClick="nextImg()">Next</button>

これがフィドルです：http://jsfiddle.net/59ven/

4

2 に答える 2

2

個人的には、パディングを使用してテキストをボタンの中央に配置するのが好きです。これにより、すべてのブラウザで垂直方向 (および水平方向) の中心を適切に配置でき、上下の間隔を制御できます。

私は通常、cssで次のようなことをします（ホバー効果を除外します）：

input[type="button"], input[type="submit"], a.btn:link, a.btn:active, a.btn:visited {
    background-color: #E3E4F0;
    border: 1px #8C8C8C solid;
    border-radius: 25px;
    padding: 5px 8px 5px 8px;
    text-decoration: none;
}

次に、次のように使用できます。

<input type="button" onclick="whatever" value="Button Text" />

またはリンクをボタンのように見せる

<a href="#" class="btn">Button Text</a>

「height」および「line-height」プロパティを使用すると、制限される可能性があることに注意してください。たとえば、2 行のテキストを含むボタンが必要な場合、各行の行の高さを 25 ピクセルにする必要がありますか? パディングを使用すると、通常の行の高さを 18px ～ 20px に保つことができ、ボタンは複数の行にうまく適合します。

それが役立つことを願っています!

于 2013-07-30T21:15:26.377 に答える