Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Feb 2014
    Posts
    512
    Thanks
    82
    Thanked 0 Times in 0 Posts

    Heading not correctly positioned

    Hello

    Despite the text-align attribute and margin-top, my text is not centered or 50px from the top margin. This is my code:

    Code:
    <style>
    
    .heading {
    text-align: center;   
    display: inline-block;
    color: #ffffff;
    margin-top: 50px;
    margin: auto;
    padding: 0;			
    position: absolute;			
    top: 0;	
    font-family:'FontAwesome';
    font-size: 30px;
    }
    
    </style>
    and in my HTML, I have

    Code:
    <div class="heading">
    This is Home Flix
    </div>
    Is the CSS code incorrect, please?

  2. #2
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,451
    Thanks
    3
    Thanked 608 Times in 594 Posts
    Hi there Blue1,

    does this help...

    Code:
    
    .heading {
        margin: 1.67em auto 0;		
        font-family: FontAwesome;
        font-size: 1.88em;
        color: #fff;
        text-align: center; 
     }

    coothead
    Last edited by coothead; Feb 9th, 2019 at 10:11 PM.
    ~ the original bald headed old fart ~

  3. Users who have thanked coothead for this post:

    Blue1 (Feb 9th, 2019)

  4. #3
    Regular Coder
    Join Date
    Feb 2014
    Posts
    512
    Thanks
    82
    Thanked 0 Times in 0 Posts
    That helps a million, Coothead - thank you again!

  5. #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    3,451
    Thanks
    3
    Thanked 608 Times in 594 Posts

    No problem, you're very welcome.

    coothead
    ~ the original bald headed old fart ~

  6. #5
    New to the CF scene
    Join Date
    Jan 2019
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Also make sure to check your header on different screen sizes. I've made the mistake of optimizing the header for desktops only for it to be completely whack on mobile devices


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •