0

我有一个文本框容器 div ( div.tb) 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 测试

谢谢你的时间。

4

2 回答 2

1

尝试更改占位符文本的行高。我没有看到您在做什么，但这应该可以解决问题。（将行高设置为等于您的输入高度。希望对您有所帮助！

于 2012-05-08T21:11:24.743 回答
0

如果你只需要支持 Chrome & FF & IE 8+ 那么

以下CSS将有所帮助：

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

还请查看以下实现相同的不同方法

如何为所有浏览器垂直居中 div？

于 2012-05-08T21:18:24.860 回答