Vertically center a textbox in a right-aligned div

Question

One of the solutions I learned is to set the display of the parent div element to table-cell and use the vertical-align property.

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

<div>
  <input>
</div>

Corresponding JSFiddle

There is code demo and its on the OP title, I think it clearly shows it's a textbox. Also please downvoters tell me why the downvotes? — shole, Jun 29 '16 at 02:01

score 5 · Accepted Answer · edited May 23 '17 at 11:52

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

<div>
    <input>
</div>

Benefits of flexbox:

minimal code; very efficient
centering, both vertically and horizontally, is simple and easy
equal height columns are simple and easy
multiple options for aligning flex elements
it's responsive
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:

Methods for Aligning Flex Items
Using CSS flexible boxes ~ MDN
A Complete Guide to Flexbox ~ CSS-Tricks
What the Flexbox?! ~ YouTube video tutorial

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.

seems great...now I am trying this and will accept once it works :) Also thanks for the links for self learning. — shole, Jun 29 '16 at 02:05

score 0 · Answer 2 · edited Jun 29 '16 at 02:14

0

Wrap everything with a div set to float:right.

edited Jun 29 '16 at 02:14

André Senra

1,875
2
11
13

answered Jun 29 '16 at 01:55

Nguyen Tuan Anh

1,036
8
14

score 0 · Answer 3 · answered Jun 29 '16 at 06:33

updated your fiddle with few tweaks. hope this works for you. Please check 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%);
}

Vertically center a textbox in a right-aligned div

3 Answers3