css绝对输入div位置答案

【问题标题】：css absolute input div positioncss绝对输入div位置
【发布时间】：2012-05-08 21:01:09
【问题描述】：

我有一个带有 position:relative 的文本框容器 div (div.tb)，包含输入和占位符 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 测试

感谢您的宝贵时间。

【问题讨论】：

而你正在努力实现...什么？
@Madbreaks 垂直对齐，不是水平对齐，而是输入和占位符垂直居中。
尝试设置 .placeholder 的 line-height 属性并使其与输入高度相等。
那么输入是在 div 之上还是反之亦然？由于它们都处于绝对位置，因此我无法确定您要在另一个之上显示哪个。

标签： html css position

【解决方案1】：

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

【讨论】：

你有链接吗？顺便说一句，您为什么不尝试在输入标签中使用 placeholder="placeholder text"？
因为我不能设置占位符的样式，而且它不能跨浏览器工作。
好的，您的输入高度是 28px，而不是 18px...您可以将 line-height: 28px 添加到您的 .placeholder 中，它会正常工作！编辑：无论如何我都会使用 html5 占位符，并将其用作后备。

【解决方案2】：

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

遵循 css 会有所帮助：

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

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

How to vertically center a div for all browsers?

【讨论】：