Vertical alignment of button

Question

Hi I have created one button. I gave it bootstrap for centring. Now I need to get that button vertically align to centre of page without margin and padding. How would I do that?

HTML is given below

<div class="row">
  <div class="col-xs-12 col-lg-4 col-md-4 col-sm-4"></div>
  <div class="col-xs-12 col-lg-4 col-md-4 col-sm-4">
    <button class="case-study-button">
      <a href="#"> CASE STUDY <span class="fa fa-angle-double-down"></span></a>
    </button>
  </div>
  <div class="col-xs-12 col-lg-4 col-md-4 col-sm-4"></div>
</div>

CSS is give below

/* without margin and padding */

.case-study-button {
  height: 61px;
  width: 267px;
  border-radius: 30px;
  background: transparent;
  border-color: white;
  border-width: 2px;
}

You can use [`position:absolute`](https://www.w3schools.com/cssref/pr_class_position.asp), or read about [`.align-items-center`](https://getbootstrap.com/docs/4.0/utilities/flex/#align-items) — Carl Binalla, Dec 14 '17 at 08:24
why don't you post us your "case-study-button" css? maybe we could help — Orange Orange, Dec 14 '17 at 08:26
Just to be clear, you want it to be right in the middle of `.row`, regardless of size of `.row`? — Carl Binalla, Dec 14 '17 at 08:31
I have a section where i added a button now I can able to make it horizontally centre but vertically for particular that section i can not — Nikhil Musale, Dec 14 '17 at 08:39

score 2 · Answer 1 · answered Dec 14 '17 at 08:41

You can position the button absolute to 50% and then use transform translate to center it. Using a fixed width on the button might cause problems with responsiveness.

.wrap {
  border: 1px solid black;
  height: 300px;
}

.case-study-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);

  height: 61px;
  max-width: 267px;
  border-radius: 30px;
  background: transparent;
  border-color: white;
  border-width: 2px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-12 col-lg-4 col-md-4 col-sm-4"></div>
  <div class="col-xs-12 col-lg-4 col-md-4 col-sm-4 wrap"><button class="case-study-button"><a href="#"> CASE STUDY <span class="fa fa-angle-double-down"></span></a>
                </button></div>
  <div class="col-xs-12 col-lg-4 col-md-4 col-sm-4"></div>
</div>

score 0 · Answer 2 · answered Dec 14 '17 at 08:55

You can set 'display:flex' to its parent div and 'align-items:center'.

.btnOuter{
  display:flex;
  align-items:center;
  height:500px
}
.case-study-button {
  height: 61px;
  width: 267px;
  border-radius: 30px;
  background: transparent;
  border-color: white;
  border-width: 2px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
  <div class="col-xs-12 col-lg-4 col-md-4 col-sm-4"></div>
  <div class="col-xs-12 col-lg-4 col-md-4 col-sm-4">
  <div class="btnOuter">
  <button class="case-study-button"><a href="#"> CASE STUDY <span class="fa fa-angle-double-down"></span></a></button>
    </div>            
  </div>
  <div class="col-xs-12 col-lg-4 col-md-4 col-sm-4"></div>
</div>

score -1 · Answer 3 · answered Dec 14 '17 at 08:40

-1

Change the CSS part like this :-

.case-study-button {
  height: 10%;
  width: 267px;
  border-radius: 30px;
  background: transparent;
  border-color: white;
  border-width: 2px;
  position:absolute;
  top:45%;
}

answered Dec 14 '17 at 08:40

Deepak Kumar

221
3
17

Vertical alignment of button

3 Answers3