Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vertical align middle button in div [duplicate]

Tags:

html

css

I am trying to vertically align this button in the center of the modal-footer div. Here is a link to my JSFiddle: https://jsfiddle.net/kris_redden/34jyLpok/

.modal-footer {
  background-color: #2A3E5D;
  color: white;
  height: 100px;
  padding: 2px 16px;
}

.wrapper-div {
  vertical-align: middle
}

.button {
  background: #e8e8e8;
  display: inline-block;
  font-size: 12px position: relative;
}
<div class="modal-footer">
  <div class="wrapper-div">
    <button type="button" class="button"> Submit Filters </button>
  </div>
</div>

I'm not sure what needs to change in order for this to be vertically aligned in the center of the blue modal-footer div. I know can accomplish this in a hacky way by putting margins on the button but that isn't what I want to do.

like image 317
SQL and Java Learner Avatar asked Jul 26 '17 17:07

SQL and Java Learner


People also ask

How do I center a button vertically in a div?

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 vertically center a div inside another div?

Vertically centering div items inside another div Just set the container to display:table and then the inner items to display:table-cell . Set a height on the container, and then set vertical-align:middle on the inner items.

How do I vertically align text in the center of a div?

Using the Line-Height Property In most cases, you can also center text vertically in a div by setting the line-height property with a value that is equal to the container element's height.

How do I vertically align a button in CSS?

Other than flexbox property, we can also center align the button horizontally and vertically using a set of CSS properties. Add position: relative to the container class and position: absolute to the class containing the button. Now use left:50% and top:50% to position the button to the center of the container.


2 Answers

Easiest would be to add the following to .modal-footer

display: flex; align-items: center; 
like image 169
Maarten van Tjonger Avatar answered Sep 19 '22 05:09

Maarten van Tjonger


this can also be achieved by using

.button-container{
 position:relative;
 height:100%;
}

.button{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

vertical-align:middle; is not necessary here. i would use this method if button container height is unknown and if i could not use flex-box (dispaly:flex;) instead.
https://jsfiddle.net/34jyLpok/7/

another option is to use flex-box (display:flex;)

.button-container{
     height:100%;
     display: flex;
     //flex-direction: column;//only vertical
     align-items: center;//both vertical and horizonal
     justify-content: center
    }

    .button{
      width:100px;
    }

the problem with display: flex is that it is not fully supported in old IE browser versions. https://jsfiddle.net/34jyLpok/9/

like image 26
omer Avatar answered Sep 20 '22 05:09

omer