Why does my text keep aligning to the left when I adjust the width, causing my background to remain attached to the text?

When I add a width attribute to my #information h1 id, it seems to override the text-align: center; property and aligns the text/background to the left instead of center.

Basically, I need assistance in centering the headers with the appropriate background width so that there is no extra background on the sides.

I am completely new to this - this is my first time playing around with html and css - I just started my course a day or two 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 ATTRIBUTE

Headers how I want them but not centered

WITHOUT WIDTH ATTRIBUTE Headers without width

htmlcsscentering

Answer №1

Aligning text at the center with the CSS property text-align: center will center the text within the specified element (such as h1). If you set the element's width to 130px, it will center the text within that specific width (even if it is narrower than the actual text content). However, the element itself will still start from the left side of its container (like the body).

Avoid setting a fixed width for better results.

Additional note:

You can enclose the text within an inline span element inside the h1, apply text-align: center to the h1, and customize other styles specifically on the span element like this:

#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>

Answer №2

Make sure to give the h1 element a default style of display: inline;, as it typically defaults to display: block;. To understand the difference between these two display properties, check out this discussion on Stack Overflow here. I also include some horizontal padding for added spacing. Feel free to customize the styling for the p tag as needed.

#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>

Answer №3

Using the text align property in the h1 instead of the section can affect the layout of your webpage. For more information on text alignment, you can visit this link

To implement text alignment effectively, consider the following code snippet:

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

#information h1 {
    display: inline-block; /* Set the h1 as an inline block to adjust 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 padding for visual appeal */
}

Ensure proper usage of HTML heading elements (h1, h2, h3, etc.) for good SEO practices. Stay on track and keep improving, my friend!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Filtering data from an array in PHP

I have a code snippet that functions well when the target variable is a single value. The assumption here is that $bank_country represents a single value, such as Brazil, with no issues. <select class="form-control" multiple="1" name="country[]"> & ...

phphtmlmysqlforms

Exploring different sections of the website

I am looking to create a seamless navigation experience between controls on a webpage. Below is an example code snippet that outlines the functionality where a user can click on any component and be directed to another controller. Sample code: const app ...

javascripthtmlangularjs

Question about the origin of style sheet source files [*.css?ver=]

Can you explain the purpose of appending a query string to the end of a style sheet? I frequently come across examples like this: some-stylesheet.css?ver=1.2.3 Appreciate your insights. ...

css

Creating elegant text in HTML using only CSSLearn how to design stylish text using CSS without any additional code

Can you generate stylish text using just CSS in HTML? Check out this link for a great demonstration of fancy text. ...

htmlcss

I'm attempting to render HTML emails in ReactJS

I have been attempting to display an HTML page in React JS, but I am not achieving the same appearance. Here is the code snippet I used in React JS: <div dangerouslySetInnerHTML={{ __html: data }}/> When executed in regular HTML, the page looks lik ...

javascripthtmlcssreactjs

Updating a table in Javascript after deleting a specific row

Is there a way to automatically reindex rows in a table after deleting a row? For example, if I delete row 1, can the remaining rows be reordered so that they are numbered sequentially? function reindexRows(tableID) { try { var t ...

javascripthtmlrows

Add CSS styles to the outermost container element when the slideshow is currently in use

On my homepage, I have a carousel featuring multiple slides. However, when the third slide appears in the carousel, the positioning of the carousel buttons within the div class="rotator-controls" shifts downward due to the space taken up by the image. My o ...

javascriptjquerycsscycle2

The Final Div Fluttering in the Midst of a jQuery Hover Effect

Check out my code snippet here: http://jsfiddle.net/ZspZT/ The issue I'm facing is that the fourth div block in my example is flickering quite noticeably, especially when hovering over it. The problem also occurs occasionally with the other divs. Ap ...

javascriptjquerycss

Tips for creating a cursor follower that mirrors the position and size of another div when hovering over it

I am trying to create a cursor element that follows the mouse X and Y position. When this cursor hovers over a text element in the menu, I want it to change in size and position. The size of the cursor should match the width and height of the text being h ...

javascripthtmljquerycss

Is it true that setting the background size to cover does not actually stretch the image?

Hi, I seem to be having trouble stretching an image using the background-size property. Despite setting it to cover, one or two sides of the image are always getting cropped. What I really want is a way to distort the image so that it stretches to fit any ...

htmlcssbackground-imagepositioning

Which is more effective: coding with just plain JavaScript and CSS, or utilizing frameworks?

As a student, is it more beneficial to focus on utilizing pure JavaScript & CSS or frameworks? And which approach is best suited for the professional field? ...

javascriptcssframeworks

Steps for extracting a portion of the current page's URL

Can someone help me extract a specific part of the current URL using JavaScript? The URL looks something like this: I need to isolate the number "3153038" from the URL and store it in a JavaScript variable. Thank you! ...

javascripthtml

Styling a table in CSS to have top and bottom borders

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> li { display:inline; list-style-type:none; padding-left:1em; margin-left:1em; border-left:1 ...

htmlcss

Choose <a role="button"> over <button> for a better user experience

When testing my website for accessibility with the NVDA program, I discovered a way to make links behave like buttons by using an attribute called role="button". According to MDN Web Docs and Bootstrap 4 documentation: links should have a role="button" ...

htmlaccessibility

Commitment of service within AngularJS controller using the "as" syntax

I'm experiencing an issue with the code snippet below. I prefer using the controller as syntax and assigning data to 'this' instead of $scope. The problem is that in this scenario, when using $scope.user everything works fine, but when tryin ...

javascripthtmlangularjs

Issue with positioning content

Hey everyone, I'm currently developing a website and encountered an issue with placing content inside the body tag within a div element. I attempted to place the div inside the body tag, but the outcome was unexpected: The content seems to be appear ...

htmlcsstwitter-bootstrap

Concealing certain options in a dropdown list with jQuery Chosen

My app has a unique feature where it displays different dropdown lists based on previous selections. Specifically, I have two lists - one for vehicle Makes and the other for Models. When a specific Make is chosen, like BMW or Audi, the next list will only ...

javascriptjqueryhtmljquery-chosen

Missing 'id' property in ngFor loop for object type

I'm currently learning Angular and I've been following a code tutorial. However, despite matching the instructor's code, it doesn't seem to be working for me. When I try to compile the following code, I receive an error message stating ...

htmlangularngfor

Modify button behavior on click after the initial press

Struggling to make this work the way I want. I have a button that should execute Javascript function A when clicked, and in function A, I need to change the onclick attribute to function B. This way, on the second tap of the button, it will trigger functio ...

javascripthtmlbutton

How to position a centered div with a background image on a webpage

I am trying to achieve a centered layout for a div and its content on a webpage. The div includes a background image. Here is my approach using Flexbox: <head> <style> .flex_container { display: flex; flex-d ...

htmlcssflexbox