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绝对输入格位置

回答

相关问题