Question

我有一个带div.tb的文本框容器div（position:relative），其中包含输入和占位符div，它们都有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;
}

使用最新的Chrome for Mac Os X进行测试

感谢您的时间。

Answer 1

尝试更改占位符文字的行高。我没有看到你在做什么，但这应该解决问题。（设置一个等于输入高度的行高。希望它有所帮助！

Answer 2

如果你只需要支持Chrome＆amp; FF＆amp; IE 8+然后

关注css将有所帮助：

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

还要看下面的diff方法来实现相同的

How to vertically center a div for all browsers?

css绝对输入div位置

2 个答案: