Vertically aligning
contents

Question

The simplest things... Why isn't the text in the below centered vertically? Isn't that what vertical-align: middle does?

    <div style="width:100%;height: 300px;background-color: #0047b3;vertical-align: middle;">
      Why are you not centered vertically?!?!?!
    </div>

score 0 · Accepted Answer · answered Sep 29 '17 at 05:35

0

If you read some of the flex properties it gets lot easier see below '

div {
  width: 100%;
  height: 300px;
  background-color: #0047b3;
  display: flex;
   align-items: center;
}

<div>whatever you want to align vertically centre </div>

answered Sep 29 '17 at 05:35

Satyam Pathak

6,612
3
25
52

I like this, but now the text isn't horizontally aligned, and using `text-align: center` doesn't seem to make it work. Any ideas why? – gtilflm Sep 29 '17 at 05:42
@gtilflm try using `justify-content:center;` – Shadow Fiend Sep 29 '17 at 05:43
1

nvm, I found `justify-content: center;` for those who are reading this comment. – gtilflm Sep 29 '17 at 05:43
lol... beat me by 1 sec. :) – gtilflm Sep 29 '17 at 05:43
yes if the text is concerned we can use 'justify-content: center'; But it's the best approach to align elements vertically center – Satyam Pathak Sep 29 '17 at 05:48

Vertically aligning contents

1 Answers1

Vertically aligning
contents