shole shole - 1 year ago 63
CSS Question

Vertically align a textbox in a right-aligned div

One of the solutions I learned is to set the

of the parent div element to
and use the

While this works, in my case I also need the parent div to float right, but it breaks the table-cell trick and the whole thing does not work now.

So my question is simple: Why exactly is this happening, and more importantly, how can I achieve the effect I want?

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


Corresponding JSFiddle

Answer Source

CSS3 provides flexbox. All you need is this:

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;
    padding: 5px;

Benefits of flexbox:

  1. minimal code; very efficient
  2. centering, both vertically and horizontally, is simple and easy
  3. equal height columns are simple and easy
  4. multiple options for aligning flex elements
  5. it's responsive
  6. unlike floats and tables, which offer limited layout capacity because they were never intended for building layouts, flexbox is a modern (CSS3) technique with a broad range of options.

To learn more about flexbox visit:

Browser support:

Flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, use Autoprefixer. More details in this answer.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download