0

In the following code I am trying to put all the headings be align vertically in the middle but it is not working with vertical alignment as you can see on my jsfiddle : https://jsfiddle.net/Wosley_Alarico/exp1zjh6/1/

html:

<div class="captions">
  <h2>design</h2>
  <h1>create</h1>
  <h2>print</h2>
</div>

css:

.captions { 
  display:flex;
  vertical-align:middle;
}
h1{
  font-size:28pt;
}

How can I put the h1 in the middle with the h2's?

Sidney Sousa
  • 3,378
  • 11
  • 48
  • 99

2 Answers2

0
.captions { 
  display:flex;
  align-items: center;
 justify-content:center;
}
Minal Chauhan
  • 6,025
  • 8
  • 21
  • 41
Piyush.kapoor
  • 6,715
  • 1
  • 21
  • 21
  • Well. it moves the h1 further up. But what I actually want is to move the h1 further up. like - h1 -. Imagine that the dashes are h2. So you can see that h1 is in the middle with h2. – Sidney Sousa Jul 15 '16 at 11:03
  • Although this code may be help to solve the problem, providing additional context regarding _why_ and/or _how_ it answers the question would significantly improve its long-term value. Please [edit] your answer to add some explanation. – Toby Speight Jul 15 '16 at 12:21
0

Add align-items: center; to .captions

.captions {
  display: flex;
  vertical-align: middle;
  align-items: center;
}

Demo

Ismail Farooq
  • 6,309
  • 1
  • 27
  • 47