CODEWITHSUNDEEP
csshtmlvertical-alignment
user811686
user811686

Reputation: 37

Css Vertical Alignment

I have buttons with single column order inside div. Button count is changeable. I want to align buttons vertically. "vertical-align:middle" is not work. How can I do that?

Div height is fixed. http://jsfiddle.net/WmD3L/ How can I align theese buttons vertically?

Upvotes: 0

Views: 8722

Answers (2)

Justin
Justin

Reputation: 27331

This is the best way in my opinion (It's IE8+):

HTML:

<div class="block">
  <div class="centered">
    <div><input type="submit" value="ABC"/></div>
    <div><input type="submit" value="ABC"/></div>
    <div><input type="submit" value="ABC"/></div>
  </div>
</div>

CSS:

/* Can be any width and height */
.block {
  height:500px;
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content:'';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can be any width or height */
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}

Demo: http://jsfiddle.net/WmD3L/13/

Upvotes: 0

James Bell
James Bell

Reputation: 614

If the button has a fixed height you can use line-height to place the text in the middle.

e.g.

#button {
   height: 50px;
   line-height: 50px; //Must be the same as height to vertically align to the middle
}

You can also use

#button {
    display: table-cell;
    vertical-align: middle;
}

But I don't think this works cross browser unfortunately.

Upvotes: 3

Related Questions