Vertically align
in header

Question

I'm sorry if this is a very basic question. But I have a header that has a height of 350px. I have a h1 and I want it to be vertically in the center of the header. I used "text-align: center;" and it aligns it horizontally but not vertically. Help please ?

HTML

<body>
    <header>
      <h1> Cian Designs </h1>
    </header>

</body>

CSS

header {
  position: fixed;
  width: 100%;
  min-height: 350px;
  background-image: url("../resources/img/header.png");
  background-position: center;
  background-size: cover;
}

header h1 {
  text-align: center;
  vertical-align: middle;
  font-family: Roboto;
  font-size: 50px;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 1px 1px 1px black;
}

Meet SO documentation [`Vertical centering`](http://stackoverflow.com/documentation/css/5070/vertical-centering#t=201702170111450456788) — tao, Feb 17 '17 at 01:13
I'm helping, @Cian. You're the one who's not. You waste your time and everyone else's on a question that has been asked hundreds of times before. Even if you don't **like** reading. This is something you will need. And until you don't read, you won't learn. — tao, Feb 17 '17 at 01:14
@CíanMacTiarnáin The linked question has multiple ways to solve this issue. The best for ease of use is probably the flexbox solution. The only issue with flexbox is limited support for IE 9 (and older) and some inconsistency between the newer browsers, which can be worked around. `line-height` is a good solution if you know for a fact the header will never wrap. `position` solution requires you to declare a height on the h1, but has great compatibility. `display:table` can have a few issues, but it also a solid option. So, yes, there are already good answers for this question on SO. — Joseph Marikle, Feb 17 '17 at 01:21

score -1 · Accepted Answer · answered Feb 17 '17 at 01:10

-1

So in the h1 you can change the top margin to around 150px margin-top:150px;

answered Feb 17 '17 at 01:10

COOKIE

118
1
9

This seemed to work great, however can you explain how you got 150px from? So i can understand for future use. – Cían Mac Tiarnáin Feb 17 '17 at 01:14
So basically, what the code does, is make the top margin of the h1 bigger, so it sits in the center. Since your header is 350px, 150px is about the middle, leading to the h1 sitting in the middle. – COOKIE Feb 17 '17 at 01:17
Can someone tell me who downvoted this and why? – COOKIE Feb 17 '17 at 01:20
@COOKIE I didn't downvote, but this solution does have a few issues. For starters, it's hard coded. You have to guess the value, which will change if you adjust the font size, line height, or the height of the `
`. It also doesn't maintain centering if the `
` wraps to a second line. Overall, it works, but only partially and not very robustly.
– Joseph Marikle Feb 17 '17 at 01:24
1

I did, because you answered a question that showed no research effort. You should avoid answering low quality questions. See [ask] and [answer] for details, please. Besides, your solution is not ok, even from a technical point of view, but that's another story. That's not why I downvoted it. I downvoted all, on principle. :) – tao Feb 17 '17 at 01:25
Ok, thanks. I'll make sure to change that for my next answer. :3 – COOKIE Feb 17 '17 at 01:26

score -1 · Answer 2 · answered Feb 17 '17 at 01:14

See if this help, you can have two or more lines and result are same...

header {
  display: flex;
  justify-content: center;
  background-color: #FAFAFA;

  position: fixed;
  width: 100%;
  min-height: 350px;
  background-image: url("../resources/img/header.png");
  background-position: center;
  background-size: cover;
}

header h1 {
  align-self: center;

  text-align: center;
  font-family: Roboto;
  font-size: 50px;
  color: #fff;
  text-transform: uppercase;
  text-shadow: 1px 1px 1px black;
}

<header>
  <h1>Heading 1</h1>
</header>

Instead of mini-height, use padding like padding: 160px 0 and you're always going to have H1 in the center.

Vertically align in header

in header

2 Answers2

Vertically align
in header