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

问题：

<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>

#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;
}

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

.calendarInput {
    float: left;
}

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

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>

#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;
}

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

.calendarInput {
    float: left;
}

现场示例：

span

元素应该是

display:inline块我想。我用
行高
和
显示：表格单元格进行了尝试方法。除了IE7和IE8，我可以在所有浏览器中使用它

我知道这是一个经常发生的问题，但也许你能给我一些建议

解决方案：
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>

#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;
}

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

.calendarInput {
    float: left;
}

我用
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>

对于所有IE版本，我都有条件样式表。
这应该使文本垂直居中，强制文本以25px的高度显示（与输入字段相同）。线的高度，然后垂直中心线在25像素的高度，太

.annotation {
    display: inline-block;
    zoom: 1;
    *display: inline;
    height: 27px; /* +2px for border */
    line-height: 27px;
}

尝试
垂直对齐：中间对齐
用于图像和文本div。
尝试以下操作：

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

您也可以这样做。
您看到指向live示例的链接了吗？我尝试了你的代码（链接：），但日历图标只在IE7模式下看起来正常。
.annotation
没有垂直居中。感谢您的支持。我用你的代码更新了链接。到目前为止，我只尝试将IE9置于IE7/IE8模式。这里的文本没有居中…请使用与输入字段相同的行高，或者您将文本放入其中的任何内容-如果不起作用，请使用填充