Question

我有一个带有文字输入的页面，就像您在this fiddle

中看到的那样

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>更改为<span>，以便选项和搜索栏都是inline / inline-block元素。

jsFiddle

当然，您的过渡现在已经中断，您需要使用其他方法。

编辑：经过一段时间的努力，我得到了大部分工作jsFiddle，主要是通过删除一堆样式：P虽然宽度转换不起作用。

Answer 2

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

我得到了你想要的东西，但你现在设置CSS的方式不会让你在那里，我不认为。您当前的居中方式完全取决于margin-top: 30px课程中声明的.options。可能更好的方法是将.input和.options类包装在容器类中，然后在那里进行垂直居中。

以下是我的意思的一个例子：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/

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

3 个答案: