Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I center vertically a bootstrap class button?

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.

like image 834
diegoaguilar Avatar asked Mar 07 '14 05:03

diegoaguilar


People also ask

How do I center align a button in Bootstrap?

Answer: Use the text-center Class You can simply use the built-in class . text-center on the wrapper element to center align buttons or other inline elements in Bootstrap. It will work in both Bootstrap 3 and 4 versions.

How do you center a button vertically?

We can align the buttons horizontally as well as vertically. We can center the button by using the following methods: text-align: center - By setting the value of text-align property of parent div tag to the center. margin: auto - By setting the value of margin property to auto.

How do I center a div vertically using Bootstrap 5?

Aligning content to the center of the DIV is very simple in Bootstrap 5, You just have to convert the div into a flex box using d-flex class property and then use the property align-items-center to vertically align the content in the middle of the div.


2 Answers

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!

like image 137
Narendra Avatar answered Sep 19 '22 03:09

Narendra


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>
like image 41
Standard Avatar answered Sep 19 '22 03:09

Standard