css絕對輸入格位置

我有一個文本框容器div（div.tb）與position:relative，包含輸入和佔位符div，這些都有position:absolute。css絕對輸入格位置

問題是輸入文本是垂直居中，但佔位符文本不是垂直居中。

所以我需要佔位符文本垂直居中，就像輸入。

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

測試了最新的Chrome的Mac OS X

感謝您的時間。

來源

2012-05-08 onlineracoon

而且你想實現WH ...在？ – Madbreaks

@Madbreaks垂直對齊，而不是水平對齊，但輸入和佔位符垂直居中。 – onlineracoon

嘗試設置.placeholder的line-height屬性，並使其等於您的輸入高度。 – rafaelbiten

嘗試更改佔位符文本的行高。我沒有看到你在做什麼，但應該解決這個問題。（設置的line-height等於你輸入身高希望它可以幫助

來源

2012-05-08 21:11:24 rafaelbiten

他們都是@ 18px – onlineracoon

你有鏈接嗎？順便說一下，爲什麼不嘗試在輸入標籤中使用placeholder =「placeholder text」？ – rafaelbiten

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

，如果你只需要支持Chrome的& FF & IE 8+然後

以下CSS將幫助：！

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

也看看下面的差異的方式來達到同樣的

How to vertically center a div for all browsers?

來源

2012-05-08 21:18:24 N30

css絕對輸入格位置

回答

相關問題