How to get my footer text vertically centered?

Question

footer {
  text-align: center;
  color: #FFF;
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 90px;
  background-color: #464646;
}

<footer>
  &copy; Name
</footer>

I want my name to be in the exact center of the footer. But it will only center at the top. Can someone answer this very basic question? Try to not make your answer to difficult as I am only a beginner.

Add `margin: 0 auto` to your styling. – Dave Jan 30 '18 at 15:32 — Dave, Jan 30 '18 at 15:32

score 2 · Answer 1 · edited Feb 11 '19 at 09:30

Before asking something, please check on internet if your question has any answer. You can vertical align by a lot of way.

Another person here answer by telling you to do it with line-height.DO NOT set a line-height to align center. It's a very bad practice. Because if for some reason your text goes to the line, everything will be break.

Try to make things that will works in almost any case.

However, here an example with display: flex;

footer {
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  color: #FFF;
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 90px;
  background-color: #464646;
  vertical-align: middle;
}

<footer>
       <span>&copy; Name </span>
</footer>

http://vanseodesign.com/css/vertical-centering/ – Alexis Vandepitte Jan 30 '18 at 15:44 — Alexis Vandepitte, Jan 30 '18 at 15:44

score 0 · Answer 2 · edited Feb 11 '19 at 17:01

0

A quick and easy way would be to set the line-height of the footer to the same value as the height, like below:

footer {
  text-align: center;
  color: #FFF;
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 90px;
  background-color: #464646;
  line-height: 90px;
}

<footer>
  &copy; some Name
</footer>

edited Feb 11 '19 at 17:01

Vickel

6,356
6
30
49

answered Jan 30 '18 at 15:32

Matthias Seifert

1,897
2
24
35

It depends on what you want to do. It's not "bad" per se, its just quick and easy, as I said. If you want to have multiple lines or a more complex footer, I would not recommend it, too. But für horizontal centering of basic stuff it is an option. Especially if you look at the bunch of compatibility issues with flexbox solutions in IE11, which at least I still have to support :( – Matthias Seifert Jan 31 '18 at 07:44

How to get my footer text vertically centered?

2 Answers2