skip to Main Content

So basically, I need help with centering my header because I use every center call possible and it doesn’t move unless I use transition translate to move it but I want it centered. Also I want my bottom text raised to the top of my page underneath my header as well. The only 2 languages I am using are html and css. I am having trouble posting my code on here because of the errors on stack flow.

2

Answers


  1. I am just visualizing and have added the code. I hope this will help you.

    The text-align: center property in the header CSS selector will center the text inside the header element. The margin: 0 auto property will center the header element horizontally on the page.

    The position: fixed property in the .bottom-text CSS selector will make the bottom text element fixed in position, so it will always stay at the top of the page, regardless of how much the user scrolls down. The top: 0 and left: 0 properties will position the bottom text element at the top and left of the page. The text-align: center property will center the text inside the bottom text element.

    <!DOCTYPE html>
    <html>
    <head>
    <title>My Website</title>
    <style>
    header {
      text-align: center;
      margin: 0 auto;
    }
    
    .bottom-text {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      text-align: center;
    }
    </style>
    </head>
    <body>
    <header>
      <h1>My Website</h1>
    </header>
    <div class="bottom-text">
      This is my bottom text.
    </div>
    </body>
    </html>
    
    Login or Signup to reply.
  2. To center your header, you can use the following CSS code:

    .header {
      text-align: center;
    }
    

    And to move your bottom text to the top of your page, you can use CSS to position it absolutely and then adjust its positioning:

    .bottom-text {
      position: absolute;
      top: 0;
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search