PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Friday, November 18, 2022

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

 November 18, 2022     alignment, css, vertical-alignment     No comments   

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)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing