2012-05-08 12 views
0

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でテストされています。

+1

を達成するためのdiff方法については、以下のそして、あなたが達成しようとしているを見てみましょうで? – Madbreaks

+0

@Madbreaks垂直整列ではなく、水平整列ですが、入力とプレースホルダは垂直に中央揃えになります。 – onlineracoon

+0

.placeholderのline-heightプロパティを設定し、入力の高さと同じにしてみてください。 – rafaelbiten

答えて

1

プレースホルダテキストの行の高さを変更してみてください。私はあなたがしていることを見ていないが、それは問題を解決するはずです。 (ご入力の高さに等しい行の高さを設定するホープは役立ちます

+0

どちらも@ 18px – onlineracoon

+0

リンクがありますか?そしてbtw、あなたは入力タグの中にプレースホルダー= "プレースホルダーテキスト"を使ってみませんか? – rafaelbiten

+0

http://www.2shared.com/file/JXQg70Ko/Archive.html – onlineracoon