html - IE 7/IE 8 中输入字段旁边的垂直居中文本

Question

问题:

我想将输入字段左侧的文本垂直居中。我还想将日历图标居中。

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;。我尝试使用 line-height 和 display: table-cell; 方法。我可以在除 IE7 和 IE8 之外的所有浏览器中使用它。

我知道这是一个经常出现的问题，但也许你可以给我一些建议。

解决方案:

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 版本，我都有条件样式表。

Answer 1

为您的图像和文本 div 尝试 vertical-align:middle;。