0

入力とプレースホルダーdivを含むテキストボックスコンテナーdiv（div.tb）がposition:relativeあり、これらは両方ともposition:absolute。

問題は、入力テキストが垂直方向に中央揃えになっているのに、プレースホルダーテキストが垂直方向に中央揃えになっていないことです。

したがって、入力と同じように、プレースホルダーテキストを垂直方向の中央に配置する必要があります。

HTML：

<div class="tb">
    <div class="placeholder">username</div>
    <input type="text" name="tb-username" />
</div>

CSS：

.tb{
    position: relative;
    height: 28px;
    border: 1px solid #CCCCCC;
    background-color: #FFFFFF;
}

.tb input, .tb .placeholder{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 28px;
}

MacOsX用の最新のChromeでテスト済み

御時間ありがとうございます。

4

2 に答える 2

1

プレースホルダーテキストの行の高さを変更してみてください。私はあなたが何をしているのかわかりませんが、それで問題は解決するはずです。（行の高さを入力の高さに等しく設定します。お役に立てば幸いです。

于 2012-05-08T21:11:24.743 に答える
0

Chrome と FF と IE 8+ のみをサポートする必要がある場合は、

次の css が役立ちます。

display: table-cell; vertical-align: middle;

また、同じことを達成するための差分方法については、以下をご覧ください

すべてのブラウザのdivを垂直方向に中央揃えする方法は?

于 2012-05-08T21:18:24.860 に答える