html - 文本输入周围的神秘“填充”

Question

我有一个带有文本输入的页面，就像你在这个小提琴中看到的那样

来源

Easier to see on JSFiddle...

请注意，当您第一次访问页面时，输入是如何稍微偏离垂直中心的。现在单击文本输入并观看一组额外的控件展开。现在文本输入跳到完美的垂直中心。模糊文本输入会导致控件折叠，并且文本输入不再位于垂直中心。

注意：如果您在文本输入中至少输入一个字母，额外的控件将不会隐藏。

有谁知道为什么输入不会停留在垂直中心？

感谢您的时间。

Answer 1

将内联元素垂直居中的一种更可靠的方法是将其设置line-height为与height.

添加这个：

section.explore header {
    line-height: 100px;
}

删除这个：

section.explore header div.input {
    display: inline-table;
}

并将您<div>的 s 更改为<span>s 以便选项和搜索栏都是inline/inline-block元素。

jsFiddle

当然，您的转换现在已损坏，您需要使用不同的方法。

编辑：经过一番摆弄后，我得到了它主要工作的jsFiddle，主要是通过删除一堆样式：P 宽度转换还不起作用。

Answer 2

它似乎偏离了中心，因为您的控件的“隐藏”状态虽然不可见，但仍在 DOM 中呈现。但是，与您的“活动”状态不同，“隐藏”状态的宽度被声明为 0，导致所有元素包裹在一起。这会影响该元素的垂直高度，从而导致差异。

我明白你想要什么，但我不认为你设置 CSS 的当前方式不会让你到达那里。您当前的居中方式完全取决于margin-top: 30px您的.options班级声明。可能会更好的方法是将 the.input和.optionsclass 都包装在一个容器类中，并在那里进行垂直居中。

这是我的意思的一个例子：http: //fiddle.jshell.net/YuZHg/6/ （虽然你仍然可以看到过渡时发生的轻微包装）

Answer 3

从外观上看，主要问题是您的选项 div 的高度正在添加到容器块并按下输入。

这个的CSS是：

section.explore header div.options {
-moz-transition: all .25s ease-in-out;
-ms-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
-moz-opacity: 0;
-ms-opacity: 0;
-o-opacity: 0;
-webkit-opacity: 0;
filter: alpha(opacity=0);
opacity: 0;
display: inline-block;
height: 0;
margin-top: 33px;
max-height: 30px;
max-width: 0px;
overflow: hidden;
position: relative;
text-align: left;
width: 0px;
}

问题是你的高度，最大高度的组合。

但是，有更简单的方法可以实现您正在尝试的内容：如果您知道每个元素的高度并且不考虑响应式布局，则只需使用绝对定位相应地定位它们。

这是一篇关于垂直对齐的好文章：http: //css-tricks.com/centering-in-the-unknown/