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

Question

我学到的解决方案之一是display将父div元素设置为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>

相应的JSFiddle

Answer 1

CSS3提供了flexbox.你需要的只是这个:

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;
}

<div>
    <input>
</div>

flexbox的好处:

1. 最小代码; 效率很高
2. 垂直和水平对中,简单易行
3. 等高柱简单易行
4. 用于对齐flex元素的多个选项
5. 它的反应灵敏
6. 与浮动和桌子不同,浮动和桌面提供有限的布局容量,因为它们从未用于建筑布局,flexbox是一种现代(CSS3)技术,具有广泛的选项.

要了解有关flexbox的更多信息,请访

• 对齐Flex项的方法
• 使用CSS灵活的盒子 ~MDN
• Flexbox ~CSS技巧的完整指南
• 什么是Flexbox？!~YouTube视频教程

浏览器支持:

所有主流浏览器都支持Flexbox,IE 8和9除外.最近的一些浏览器版本,例如Safari 8和IE10,需要供应商前缀.要快速添加所需的所有前缀,请使用Autoprefixer.这个答案的更多细节.