How can I center vertically a bootstrap class button?

Question

I need to get a button inside a form-actions vertically:

This is how is displayed:

enter image description here

So that green button is being displayed down to its div (the blue area). How can I get to center it. I use a style.css file where I've styled some other divs.

Narendra · Accepted Answer · 2014-03-07T06:03:31.733

12

Is this what you need! Here is a demo, please check and let me know if you need anything else.

http://jsfiddle.net/fkQBf/

<div style="height: 200px; border: solid 2px green; text-align:center;line-height:200px;">
    <input type="submit" Value="Ok" style="vertical-align: middle"></input>
</div>

Updated code and fiddle:

We should not use inline styles, so below is the updated fiddle with separate style

http://jsfiddle.net/fkQBf/1/

<div id="container">
    <input id="verticalButton" type="submit" Value="Ok"></input>
</div>

div#container
{
    height: 200px; 
    border: solid 2px green; text-align:center;
    line-height:200px;
}

input#verticalButton
{
     vertical-align: middle
}

Hope this helps!

edited Mar 07 '14 at 06:03

answered Mar 07 '14 at 05:56

Narendra

3,069
7
30
51

Did you got a typo or actually I should do `div#container` and `input#verticalButton`? – diegoaguilar Mar 07 '14 at 06:12
1

It is not typo, if can also use only #container. But div#container selector selects the element having container and of type div. – Narendra Mar 07 '14 at 06:13
Check this http://www.w3schools.com/css/css_id_class.asp for better understanding – Narendra Mar 07 '14 at 06:16

score 6 · Answer 2 · answered Jun 30 '17 at 09:18

Since I didn't want to set an absolute height, I used flex boxes.

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

.container {
  height:50%;
  border: 1px solid black;
  display:flex;
  align-items:center; /* vertically aligned! */
  justify-content: center;
}

.other {
  height:320px;
  border: 1px solid red;
}

<div class="other"><!-- Other content -->
Welcome to my great site!
  <div class="container"> <!-- the container you want that button -->
      <button class="btn btn-danger btn-lg">
      Hello World
      </button>
  </div>
</div>

Thanks, that's a great answer – Darragh Enright Nov 23 '18 at 16:13 — Darragh Enright, Nov 23 '18 at 16:13

score 1 · Answer 3 · answered Mar 07 '14 at 05:55

1

use some style like

display:table-cell; //main div

vertical-align:center; // to button

If this will not worked than try

height:100%; // to button
vertical-align:center; // to button
line-height : 100%;  // to button

answered Mar 07 '14 at 05:55

JayDeep Nimavat

476
6
22

What should I do to style the button, `.button` or `#button`? – diegoaguilar Mar 07 '14 at 05:56
1

If you define class to the button than use .classname or you define id for button than use #idname you can use any one of these. – JayDeep Nimavat Mar 07 '14 at 05:59
Just to confirm any property is modified/appended to the class or id, right? – diegoaguilar Mar 07 '14 at 06:01
The first solution does not work. The second solution stretches the button full height. – JGallardo Oct 21 '15 at 19:47
5

vertical-align:center ? that doesn't exist, it is vertical-align:middle – TrtG Dec 20 '16 at 14:16

How can I center vertically a bootstrap class button?

3 Answers3

Linked