Question

我学到的一个解决方案是将父div元素的display设置为table-cell并使用vertical-align属性。

虽然这有效，但在我的情况下，我还需要父div才能正确浮动，但是它会打破表格细节，现在整个事情都不起作用。

所以我的问题很简单：为什么会发生这种情况，更重要的是，我怎样才能达到我想要的效果呢？

div {
    /* float: right;  uncomment this will make this not working */
    display: table-cell;
    vertical-align: middle;
    height: 60px;
    border: 1px solid red;
}

<div>
  <input>
</div>

Corresponding JSFiddle

Answer 1

CSS3提供了flexbox。所有你需要的是：

＆＃13;

body {
    display: flex;              /* create flex container */
    justify-content: flex-end;  /* align child to right edge */
}

div {
    display: flex;              /* create nested flex container */
    align-items: center;        /* center child vertically */
    height: 60px;
    border: 1px solid red;
}

＆＃13;

<div>
    <input>
</div>

＆＃13;

flexbox的好处：

最小代码;效率很高
centering, both vertically and horizontally, is simple and easy
equal height columns are simple and easy
multiple options for aligning flex elements
它的响应
与花车和桌子不同，浮动和桌面提供有限的布局容量，因为它们从未用于建筑布局，因此flexbox是一种现代（CSS3）技术，具有广泛的选项。

要了解有关flexbox的更多信息，请访问：

浏览器支持：

所有主流浏览器except IE 8 & 9都支持Flexbox。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加所需的所有前缀，请使用Autoprefixer。 this answer中的更多详细信息。

Answer 2

将div设置为float：右边。

Answer 3

通过一些调整更新你的小提琴。希望这对你有用。请检查http://jsfiddle.net/53ALd/3780/

html：

<div >
<input class="form-control" id="txtWOFastNavigation">
</div>

css：

div {
   float: right;
    height: 160px;
    border: 1px solid #000;
    position: relative;
    background: red;
    width: 104px;
}

div .form-control{
     width: 100px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

将文本框垂直居中在右对齐的div中

3 个答案: