position:relative
のテキストボックスコンテナdiv(div.tb
)には、入力とプレースホルダdivが含まれています。これらの両方はposition:absolute
です。css絶対入力div位置
問題は入力テキストが垂直にセンタリングされているが、プレースホルダテキストが垂直にセンタリングされていないことです。
入力と同じように、プレースホルダテキストを垂直方向にセンタリングする必要があります。
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;
}
お時間をマックOS X
感謝のために、最新のChromeでテストされています。
を達成するためのdiff方法については、以下のそして、あなたが達成しようとしているを見てみましょうで? – Madbreaks
@Madbreaks垂直整列ではなく、水平整列ですが、入力とプレースホルダは垂直に中央揃えになります。 – onlineracoon
.placeholderのline-heightプロパティを設定し、入力の高さと同じにしてみてください。 – rafaelbiten