Vertical align middle button in div [duplicate]

Question

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.

You can see this answer link

Mortie
– Mortie

2017-07-26 17:54:44 +00:00
Commented Jul 26, 2017 at 17:54 — Mortie
– Mortie, Commented Jul 26, 2017 at 17:54
A negative is obviously an award.

Vishal Kumar Sahu
– Vishal Kumar Sahu

2017-07-26 17:55:42 +00:00
Commented Jul 26, 2017 at 17:55 — Vishal Kumar Sahu
– Vishal Kumar Sahu, Commented Jul 26, 2017 at 17:55

Maarten van Tjonger · Accepted Answer · 2017-07-26 17:53:07Z

69

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

display: flex;
align-items: center;

answered Jul 26, 2017 at 17:53

Maarten van Tjonger

1,9571 gold badge11 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Vishal Kumar Sahu Over a year ago

What about the support for maximum browsers.

Maarten van Tjonger Over a year ago

use autoprefixer

Vishal Kumar Sahu Over a year ago

I think the better solution would be to use less code.

omer · Accepted Answer · 2017-09-06 21:24:51Z

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/

Vishal Kumar Sahu · Accepted Answer · 2017-07-26 17:52:39Z

7

.modal-footer {
display: table;
width: 100%;
}

.wrapper-div {
display: table-cell;
  vertical-align: middle
}

Go for something like this. Here is the fiddle.

answered Jul 26, 2017 at 17:52

Vishal Kumar Sahu

1,4943 gold badges18 silver badges29 bronze badges

Comments

Bibek Shah · Accepted Answer · 2017-07-26 17:54:32Z

3

You can use flexbox as shown below

.modal-footer {
  background-color: #2A3E5D;
  color: white;
  height: 100px;
  padding: 2px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

answered Jul 26, 2017 at 17:54

Bibek Shah

4294 silver badges19 bronze badges

Comments

Mortie · Accepted Answer · 2017-07-26 17:57:30Z

2

You can change your style to this

.modal-footer {
  background-color: #2A3E5D;
  color: white;
  height: 100px;
  padding: 2px 16px;
  display:table;
  width: 100%;
}
.wrapper-div {
  display:table-cell; 
  vertical-align: middle;
}
.button {
  background: #e8e8e8;
  display: block;
  margin:auto;
  font-size: 12px
  position: relative;
}

You can remove margin:auto; from .button to only vertically center button

See on fiddle

edited Jul 26, 2017 at 17:57

answered Jul 26, 2017 at 17:51

Mortie

4049 silver badges26 bronze badges

Comments

Gerrit Bertier · Accepted Answer · 2019-11-08 12:04:46Z

1

This is one way of doing it.

.wrapper-div {
  line-height: 60px; // ex: 60px, The button will center to line-height.
}

.wrapper-div button {
  // height of button must be less than its parent.
  height: 30px;
  display: inline-block;
  vertical-align: baseline;
}

<div class="wrapper-div">
  <button type="button" class="button"> Submit Filters </button>
</div>
<div class="wrapper-div">
  <button type="button" class="button"> Submit Filters </button>
</div>

edited Nov 8, 2019 at 12:04

Gerrit Bertier

4,2412 gold badges24 silver badges38 bronze badges

answered Mar 8, 2018 at 5:08

bingo

691 silver badge1 bronze badge

1 Comment

vivekfyi Over a year ago

I dont want to give heights in px

Collectives™ on Stack Overflow

Vertical align middle button in div [duplicate]

6 Answers 6

3 Comments

Comments

Comments

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

Comments

Comments

Comments

1 Comment

Linked

Related