[FIXED] How to vertically center this span equal to h1

Issue

I got it this far:

Jsfiddle

How can I change the css of the span so it's vertically centered to the h1 on the left of it?

Hope it's not to complicated!

Solution

Your best bet is using Flex styles.

1. Remove all styles for '.title i', '.title span', '.title h1'
2. Edit title as below:

Flex title style:

.title {
    width: 100%;
    margin: 30px auto;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

justify-content: center; - This re-aligns your H1, dash, and span in the middle.

align-items: center; - This gives you that vertical alignment.

Answered By - Lauren G

Answer Checked By - David Marino (PHPFixing Volunteer)