4

重複の可能性:
選択ボックス内のテキストを垂直方向に揃えたい

このフィドルでは、ドロップダウン リストのテキストは IE と Chrome で垂直方向に中央に配置されますが、Firefox では垂直方向に上に配置されません。他のブラウザを混乱させずに Firefox の中央に配置するにはどうすればよいですか?

HTML

<select>
    <option value="One" selected="selected">Test text one</option>
    <option value="Two">Test text two</option>
    <option value="Three">Test text three</option>
    <option value="Four">Test text four</option>
</select>

CSS

select {
    height: 30px;
    width: 260px;
    border: 1px solid #A9A3A3;
    font-family: Verdana,Geneva,sans-serif;
    font-size: 11px;
    }
4

2 に答える 2

1

これを処理する最善の方法は、select に高さを割り当てるのではなく、他の要素の高さに合わせてパディングを追加することです。

于 2013-02-03T16:06:31.900 に答える
0

問題はフィドルにあります。iframe は必要最小限のサイズしかありません (少なくとも Firefox では)。次のようなものを試してください

div {
    height: 10em;
    display: table-cell;
    vertical-align: middle;
}

の周りに a を配置<div>します<select>。実際のシナリオではheight: 100%、絶対配置を使用するか、select を含むタグの属性を変更するだけです。

最初にあなたの質問を読み間違えました。ここでは水平方向の配置の答えです

body {
    text-align: center;
}

(または の上にある任意のタグ<select>)

または、次を追加します

margin-left:auto;
margin-right:auto;

しかし、一般的には、ブラウザ間の違いを避けるために にいくつかの値を設定することをお勧めしますbody(例: padding、margin、text-align)。

于 2013-01-30T17:21:40.103 に答える