How can I center text in a div with viewport units?

Question

When using pixel units, I can align text no problem. But with viewport units, I can't get anywhere. Here is my code.

#aboutMeTitle {
  height: 10vh;
  background-color: #BEA69B;
  display: block;
}
#aboutMeTitle p {
  display: inline-block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif, "FontAwesome Regular";
  text-transform: uppercase;
  letter-spacing: 0.2em;
  vertical-align: middle;
  text-align: center;
}

<div class="row" id="aboutMeTitle">
  <p>About Me</p>
</div>

`display: inline-block;` on the paragraph may *not* be what you want. — Scott, Sep 30 '16 at 02:26

score 2 · Accepted Answer · edited May 23 '17 at 10:34

2

Very simple with CSS flexbox:

#aboutMeTitle {
  display: flex;
  justify-content: center;  /* center p horizontally */
  align-items: center;      /* center p vertically */
  height: 10vh;
  background-color: #BEA69B;
}
#aboutMeTitle p {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

<div class="row" id="aboutMeTitle">
  <p>About Me</p>
 </div>

Browser support: Flexbox is supported by all major browsers, except IE < 10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, use Autoprefixer. More details in this answer.

edited May 23 '17 at 10:34

Community

1
1

answered Sep 30 '16 at 02:36

Michael Benjamin

346,931
104
581
701

That works also. I had applied a 'line-height:10vh' and that did the trick but the flex box also did the same thing. I just wonder which technique is more widely supported? – Kyle_Figueroa Sep 30 '16 at 02:49
You're already using viewport percentage units. So you can safely use flexbox. Both are cutting-edge, CSS3 technologies. In terms of which is more widely supported, that would be flexbox (see caniuse.com). – Michael Benjamin Sep 30 '16 at 02:58

Tommy Arnold · Answer 2 · 2016-09-30T02:36:12.677

0

For vertical-align:middle to work the parent must be set to display:table-cell HTML

<div class="row" id="aboutMeTitle"><p>About Me</p></div>

CSS

#aboutMeTitle {
height: 10vh;
background-color: #BEA69B;
display:block;
display:table-cell;
}

#aboutMeTitle p {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif, "FontAwesome Regular";
text-transform: uppercase;
letter-spacing: 0.2em;
vertical-align:middle;
text-align:center;
}

edited Sep 30 '16 at 02:36

answered Sep 30 '16 at 02:27

Tommy Arnold

3,339
8
31
40

That fixed the text-align property back to normal so it is horizontally centered. However I cannot get it vertically centered. Normally I just put the line height to the same value as the div but you cannot set line height to a viewport unit; or if you can I don't know a trick to do so. any insight? – Kyle_Figueroa Sep 30 '16 at 02:31
I apologize, I worded the title wrong. My main problem was the vertical alignment, not the horizontal alignment of the text. – Kyle_Figueroa Sep 30 '16 at 02:32

score 0 · Answer 3 · answered Sep 30 '16 at 02:36

You just removed display: inline-block in #aboutMeTitle p, and adding line-height: 10vh; to make text center in vertical.

HTML Code:

<div class="row" id="aboutMeTitle"><p>About Me</p></div>

CSS Code:

#aboutMeTitle {
    height: 10vh;
    background-color: #BEA69B;
    display: block;
}
#aboutMeTitle p {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif, "FontAwesome Regular";
    text-transform: uppercase;
    letter-spacing: 0.2em;
    vertical-align:middle;
    line-height: 10vh;
    text-align:center;
}

JSFIDDLE DEMO

score 0 · Answer 4 · answered Sep 30 '16 at 02:38

I feel really stupid and I apologize for bothering anyone with this. Hopefully this answer can help someone else though. I worked a double on 4 hours of sleep and now i'm working on a personal project. Anyway,you can apply a line-height property with viewport units, i just had to hard code it instead, because its not an option in the DW CSS panel.

Here is the fixed CSS

#aboutMeTitle {
    height: 10vh;
    background-color: #BEA69B;
    display: block;
}
#aboutMeTitle p {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif, "FontAwesome Regular";
    text-transform: uppercase;
    letter-spacing: 0.2em;
    vertical-align: middle;
    text-align: center;
    line-height: 10vh;
}

How can I center text in a div with viewport units?

4 Answers4