0

問題：

入力フィールドの左側のテキストを垂直方向に中央揃えにしたい。また、カレンダーアイコンを中央に配置したいと思います。

ここに画像の説明を入力

HTML:

<div id="dateselect">
    <div id="arrivalContainer">
        <span class="annotation">Anreise</span>
        <input type="text" name="arrival" id="arrival" class="input-styling" maxlength="10" size="10" />
    </div>
    <div id="departureContainer">
        <span class="annotation">Abreise</span>
        <input type="text" name="departure" id="departure" class="input-styling" maxlength="10" size="10" />
    </div>
    <div class="clearer"></div>
</div>

CSS:

#dateselect {
    padding-top: 14px;
}

#arrivalContainer {
    float: left;
    width: 160px;
}

#departureContainer {
    float: right;
    width: 160px;
}

#arrival {
    height: 25px;
    width: 68px;
}

#departure {
    height: 25px;
    width: 68px;
}

.ui-datepicker-trigger {
    position: relative;
    top: 7px;
    left: 3px;
}

.input-styling {
    color: #575756;
    font-family: "Myriad Roman", Helvetica, Arial, sans-serif;
    font-size: 12px;
    padding-left: 4px;
}

実際の例:
http://bfb.bplaced.net/

要素は私が思うspanべきです。とアプローチdisplay: inline-block;でやってみました。IE7 と IE8 を除くすべてのブラウザで動作します。line-heightdisplay: table-cell;

よくある問題だとは思いますが、アドバイスをいただけないでしょうか。

解決：

HTML:

試してみましたvalign="middle"が、IE8にはまだ問題がありました。私はこれで終わった：

<div id="arrivalContainer">
    <div class="calendarText"><span class="annotation">Anreise</span></div>
    <div class="calendarInput"><input type="text" name="arrival" id="arrival" class="input-styling" maxlength="10" size="10" /></div>
    <div class="clearer"></div>
</div>

CSS:

.calendarText {
    float:left;
    padding-top:14px;
    padding-right:5px;
}

.calendarInput {
    float: left;
}

すべての IE バージョンで、条件付きスタイルシートを使用しています。

4

3 に答える 3

1

vertical-align:middle;画像とテキストのdivの両方を試してください。

于 2013-03-01T00:45:39.430 に答える
0

これにより、テキストを25pxの高さ（入力フィールドと同じ）で強制的に表示することにより、テキストを垂直方向に中央揃えにする必要があります。次に、線の高さも線の高さを垂直方向に中央揃えにします。

.annotation {
    display: inline-block;
    zoom: 1;
    *display: inline;
    height: 27px; /* +2px for border */
    line-height: 27px;
}
于 2013-02-28T23:05:35.497 に答える
0

これを試して：

annotation {
 position:realtive;
 top: -5px; /*adjust to value that visually centers your text*/
}

あなたのカレンダーも同じです。

于 2013-03-01T14:29:28.650 に答える