Html Question posted in
Some basic documentation can be found here.

Html – Why does my text go back to left after adding the width so my background stays with text?

So , when I add my width reference to my #information h1 id it completely ignores the text-align: center; reference and puts the text/background to the left instead of center

so basically i need help getting the headers centered with the proper background width so its not backgrounding whitespace

as you can tell im brand new – this is my first time experimenting with html and css – started my course a day or 2 ago

CSS


#information h1{
    text-align: center;
    font-family: Tahoma;
    color: lightcoral;
    background-color: whitesmoke;
    width: 130px;
    margin: 2px;
    border-radius: 25px;
    box-shadow: 2px 2px 2px grey;
    font-size: 25px;
}

HTML

  <section id="information">
    <h1>Information</h1>
    <p>Currently starting my course on becoming a full stack engineer while working on a BS in Computer Science. Open to pretty much anything!<br>
      Looking for part time or full time work while I attend school and courses also open to any development projects!
    </p>
    <h1>Hobbies + More</h1>

WITH WIDTH REFERENCE

headers how i want but not centered

WITHOUT WIDTH REFERENCE
Headers without width

Tags:

3

Answers


  1. 0

    Centering text using text-align: center centers the text within the element (in your case that’s h1). If you set the elements width to 130px, it centers the text within those 130px (which might even be less wide than the text actually spans, or at least hardly more than that). The element itself still starts at the left side of its container (in your case the body).

    Just don’t set the width, as you did before.

    Addition after comment:

    You can use a span element for the text inside the h1, use text-align: center on the h1 and all the other settings on the span inside it:

    #information h1 {
  text-align: center;
}
#information h1 span {
  padding: 2px 10px;
  font-family: Tahoma;
  color: lightcoral;
  background-color: whitesmoke;
  border-radius: 25px;
  box-shadow: 2px 2px 2px grey;
  font-size: 25px;
}
    <section id="information">
  <h1><span>Information</span></h1>
  <p>Currently starting my course on becoming a full stack engineer while working on a BS in Computer Science. Open to pretty much anything!<br> Looking for part time or full time work while I attend school and courses also open to any development projects!
  </p>
  <h1><span>Hobbies + More</span></h1>
</section>
    Login or Signup to reply.
  2. 0

    Give h1 a display: inline; by default h1 use display: block;.
    read difference between them here.
    Apart from that I have horizontal padding.
    You can set style for p tag as you need

        #information h1{
        text-align: center;
        font-family: Tahoma;
        color: lightcoral;
        background-color: whitesmoke;
        margin: 2px;
        padding:0 10px;
        border-radius: 25px;
        box-shadow: 2px 2px 2px grey;
        font-size: 25px;
        display: inline;
    }
    #information {
        text-align: center;
    }
        <section id="information">
        <h1>Information</h1>
        <p>Currently starting my course on becoming a full stack engineer while working on a BS in Computer Science. Open to pretty much anything!<br>
          Looking for part time or full time work while I attend school and courses also open to any development projects!
        </p>
        <h1>Hobbies + More</h1>
    </section>
    Login or Signup to reply.
  3. 0

    You are using the text align property in the h1 instead of the section. You can find more information about text align here text-align

    You can use it like this:

    #information {
    text-align: center; /* Center-align the content within the section */
}

#information h1 {
    display: inline-block; /* Make the h1 an inline block to have only the content's width */
    font-family: Tahoma;
    color: lightcoral;
    background-color: whitesmoke;
    margin: 2px;
    border-radius: 25px;
    box-shadow: 2px 2px 2px grey;
    font-size: 25px;
    padding: 5px 10px; /* Add some padding for better aesthetics */
}

    You may also want to check te correct use of h1,h2,h3 etc in order to get along whit Google SEO. I hope it helps, keep in the good path my friend.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search