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?

user agent
  • 3,018
  • 10
  • 38
  • 89

2 Answers2

0
.captions { 
  display:flex;
  align-items: center;
 justify-content:center;
}
Minal Chauhan
  • 5,982
  • 8
  • 20
  • 39
Piyush.kapoor
  • 6,385
  • 1
  • 19
  • 20
  • 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. – user agent 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
  • 5,573
  • 1
  • 24
  • 43