Search code examples
cssalignmentvertical-alignment

How to vertically center this span equal to h1

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.