centering horizontally and vertically bootstrap button

Question

I am trying to align a line of text and a Bootstrap button, vertically and horizontally. The height of the div is set using vh. I know there are other answers for this question on here, but I couldn't get them to properly center.

#centertext {
  text-align: center;
  height: 30vh;
}

<div class="container" id="centertext">
  <h4> Want to download a more detailed version of my resume?</h4>
  <a href="#" class="btn btn-primary">
    <span class="glyphicon glyphicon-file"></span>     Download
  </a>        
</div>

Use `line-height: 30vh` and `text-align: center`, an approached mentioned in the link Banzay provided. — Chris Happy, Jan 05 '17 at 07:22
@aavrug [link](https://jsfiddle.net/adzcpht7/2/) color is added to show no vertical center — adobesmurf, Jan 05 '17 at 07:28
@ChrisHappy I tried that is only aligns the button but not the line of text. — adobesmurf, Jan 05 '17 at 07:31

score 1 · Answer 1 · answered Jan 05 '17 at 07:39

Try this:

* {
  padding: 0;
  margin: 0;
} /* Resets all default margins */

h4 {  margin-bottom: 1.33em  }

#centertext {
  text-align: center;
  height: 30vh;
  background: red;
  position: relative;
}

#centertext .wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
}

<div class="container" id="centertext">
  <div class="wrapper">
    <h4> Want to download a more detailed version of my resume?</h4>
    <a href="#" class="btn btn-primary">
      <span class="glyphicon glyphicon-file"></span> Download
    </a>

  </div>
</div>

score 0 · Answer 2 · answered Jan 05 '17 at 07:35

0

try this code..

http://codepen.io/gmkhussain/pen/MJYmVX

#centertext {
  height: 300px;
  line-height: 300px;
  text-align: center;
  border: 2px dashed #39c;
}
.inr {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

answered Jan 05 '17 at 07:35

GMKHussain

3,342
1
21
19

thanks that worked great! – adobesmurf Jan 05 '17 at 07:53

score 0 · Answer 3 · answered Jan 05 '17 at 07:39

Try this used display: flex; styling.

#centertext {
  text-align: center;
  height: 30vh;
  vertical-align: middle;
  float: none;
  background-color: grey;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
#centertext .btn-primary,
#centertext h4 {
  margin: 0 auto;
}
body {
  background-color: white;
}

<br>
<div class="container" id="centertext">
  <h4> Want to download a more detailed version of my resume?</h4>
  <a href="#" class="btn btn-primary"><span class="glyphicon glyphicon-file"></span> Download</a>
</div>

score 0 · Answer 4 · edited May 23 '17 at 12:31

0

This worked for me the second div allows for more styling and this answer is a variation from this questions answer but this one displays properly.

Thanks to @GMK Hussain

#centertext {
  height: 300px;
  line-height: 300px;
  text-align: center;
  border: 2px dashed #39c;
}
.inr {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}

edited May 23 '17 at 12:31

Community

1
1

answered Jan 05 '17 at 07:50

adobesmurf

33
1
7

centering horizontally and vertically bootstrap button

4 Answers4