How to center one line of text vertically?

Question

I'm really sorry to bring this question up since I know there are answers on this. I have read and read and can't seem to make it work. Obviously there's something I'm doing wrong so if you could explain to me what I'm supposed to do and why I'd be really thankful.

footer {
  display: inline-block;
  position: relative;
  height: 15vh;
  width: 100vw;
  background: #1a1a1a;
  border-top: 1px solid #232323;
  color: #a0a0a0;
  padding-left: 5%;
  box-sizing: border-box;
}
footer p {
  display: inline-block;
  vertical-align: middle;
  line-height: 1vh;
}

<footer>
  <p>Copyright 2016 - Say my name. All Rights Reserved</p>
</footer>

Possible duplicate of [Vertically align text in a div](http://stackoverflow.com/questions/2939914/vertically-align-text-in-a-div) — jperezov, Feb 03 '16 at 18:21
Instead of a paragraph of apologies, please post a question with details. — j08691, Feb 03 '16 at 18:23

Shea Hunter Belsky · Answer 1 · 2016-02-13T23:57:45.913

You don't need paragraph tags within the footer; just add line-height: 15vh; to your footer, and remove the surrounding paragraph tags.

footer {
  display: inline-block;
  position: relative;
  height: 15vh;
  line-height: 15vh;
  width: 100vw;
  background: #1a1a1a;
  border-top: 1px solid #232323;
  color: #a0a0a0;
  padding-left: 5%;
  box-sizing: border-box;
}

<footer>
  Copyright 2016 - Say my name. All Rights Reserved
</footer>

Pbk1303 · Accepted Answer · 2016-02-03T18:41:44.583

You can use display:table and display:table-cell property. Vertically centered text

HTML:

<footer>
  <p>Copyright 2016 - Say my name. All Rights Reserved</p>
</footer>

CSS:

footer {
  display: table;
  position: relative;
  height: 15vh;
  width: 100vw;
  background: #1a1a1a;
  border-top: 1px solid #232323;
  color: #a0a0a0;
  padding-left: 5%;
  box-sizing: border-box;
}
footer p {
  display: table-cell;
  vertical-align: middle;
  line-height: 1vh;
}

footer {
  display: table;
  position: relative;
  height: 15vh;
  width: 100vw;
  background: #1a1a1a;
  border-top: 1px solid #232323;
  color: #a0a0a0;
  padding-left: 5%;
  box-sizing: border-box;
}
footer p {
  display: table-cell;
  vertical-align: middle;
  line-height: 1vh;
}

<footer>
  <p>Copyright 2016 - Say my name. All Rights Reserved</p>
</footer>

Or you can use flex property,but its not supported by many browser version Align using flex property

CSS:

footer {
  display: flex;
  justify-content: center;        /* align horizontal */
  align-items: center;        /*ALIGN VERTICAL*/
  position: relative;
  height: 15vh;
  width: 100vw;
  background: #1a1a1a;
  border-top: 1px solid #232323;
  color: #a0a0a0;
  padding-left: 5%;
  box-sizing: border-box;
}

footer p {  
   line-height: 1vh;
}

footer {
  display: flex;
  justify-content: center;        /* align horizontal */
  align-items: center;        /*ALIGN VERTICAL*/
  position: relative;
  height: 15vh;
  width: 100vw;
  background: #1a1a1a;
  border-top: 1px solid #232323;
  color: #a0a0a0;
  padding-left: 5%;
  box-sizing: border-box;
}

footer p {
  
  vertical-align: middle;
  line-height: 1vh;
}

<footer>
  <p>Copyright 2016 - Say my name. All Rights Reserved</p>
</footer>

score 0 · Answer 3 · answered Feb 03 '16 at 18:28

0

Try this CSS:

footer {
        display: table-cell; 
        vertical-align: middle;
        text-align: center;
}

answered Feb 03 '16 at 18:28

Pim

748
8
14

score -1 · Answer 4 · answered Feb 03 '16 at 18:25

-1

footer p {
  display: inline-block;
  vertical-align: middle;
  line-height: 1vh;
  vertical-align: middle;
}

answered Feb 03 '16 at 18:25

lacexd

903
1
7
22

How to center one line of text vertically?

4 Answers4