Use HTML5 and CSS3 to align text in the center of the page below the header

Question

Use HTML5 and CSS3 to align text in the center of the page below the header

I am currently in the process of transitioning from using old HTML tables for styling to utilizing HTML5 with CSS. However, I am encountering some difficulties:

Check out my Codepen Demo

The issue I am facing is that the text aligns itself to the edge of the page instead of the header banner, which is where I want it aligned.

I have been unable to find a solution without resorting back to using tables.

Additionally, I noticed that the .article:nth-child(odd) CSS selector seems to be aligning odd elements to the left instead of the right, and I'm not sure why this is happening.

Any help or insights would be greatly appreciated. Thank you!

html css

Answer 1

Answer №1

If you're looking to create a website with a fixed width, the best approach is to enclose your existing code within a containing div:

Simply wrap all of your current code within a fixed width div like so:

#Wrap{width:1024px;}

.

<body>
  <div id="Wrap">
    ...
    /* remaining content of the website */
    ...
  </div>
</body>

View Demo on CodePen

CLEAN EXAMPLE

HTML

<div id="Wrap">
  <div id="Head"></div>
  <div id="Body"></div>
  <div id="Foot"></div>
</div>

CSS

#Wrap{
  width:1024px; /*Specify your desired page width*/
  margin:0 auto; /*Center the wrapper horizontally on the page*/
}
#Head{
  width:100%; /*Take up the full width of the wrapper*/
}
#Body{
  width:100%; /*Take up the full width of the wrapper*/
}
#Foot{
  width:100%; /*Take up the full width of the wrapper*/
}

Answer 2

If you're looking to create a website with a fixed width, the best approach is to enclose your existing code within a containing div:

Simply wrap all of your current code within a fixed width div like so:

#Wrap{width:1024px;}

.

<body>
  <div id="Wrap">
    ...
    /* remaining content of the website */
    ...
  </div>
</body>

View Demo on CodePen

CLEAN EXAMPLE

HTML

<div id="Wrap">
  <div id="Head"></div>
  <div id="Body"></div>
  <div id="Foot"></div>
</div>

CSS

#Wrap{
  width:1024px; /*Specify your desired page width*/
  margin:0 auto; /*Center the wrapper horizontally on the page*/
}
#Head{
  width:100%; /*Take up the full width of the wrapper*/
}
#Body{
  width:100%; /*Take up the full width of the wrapper*/
}
#Foot{
  width:100%; /*Take up the full width of the wrapper*/
}

Answer 3

Answer №2

As an illustration

Check out this CodePen demo

.content {
     width: 800px;
}

In order to horizontally center the .content, you should specify a width. Additionally, consider removing

<div align="center">

since it is no longer supported in HTML5.

Answer 4

As an illustration

Check out this CodePen demo

.content {
     width: 800px;
}

In order to horizontally center the .content, you should specify a width. Additionally, consider removing

<div align="center">

since it is no longer supported in HTML5.

Answer 5

Answer №3

Your text occupies the same width as a header, but it contains an image that is slightly narrower than 100% of the site. To address this, you can adjust the width of the article by adding some styling like so:

.article {
   display: block;
   margin: auto;
   width: 900px;
}

See codepen Demo

Answer 6

Your text occupies the same width as a header, but it contains an image that is slightly narrower than 100% of the site. To address this, you can adjust the width of the article by adding some styling like so:

.article {
   display: block;
   margin: auto;
   width: 900px;
}

See codepen Demo

Answer 7

Answer №4

To ensure the page looks visually appealing, it is essential to implement CSS for styling:

Check out the CodePen demo here


div {
  text-align: center;
}

Answer 8

To ensure the page looks visually appealing, it is essential to implement CSS for styling:

Check out the CodePen demo here


div {
  text-align: center;
}

Use HTML5 and CSS3 to align text in the center of the page below the header

Answer №1

CLEAN EXAMPLE

Answer №2

Answer №3

Answer №4

Similar questions

Troubleshooting the sidebar pin-unpin problem using Jquery and CSS

What is the best way to ensure that the button's left margin matches the left margin of the table at all times?

passing commands from a chrome extension to a content script

Comparison of jQuery, AngularJS, and Node.js

What steps should I follow to save an image from a URL onto my device?

The Scrollspy effect encountered an error: "$ is not defined - Uncaught ReferenceError"

Navigating a Bootstrap modal using arrow keys for scrolling - up and down

Is it possible to display one division on top of another with a transparent opacity effect in HTML?

Unraveling XML with XSLT 2.0 to Remove Normalization

Tips for customizing the appearance of an HTML dropdown menu

Include an arrow in a personalized horizontal scroll bar using Angular and HTML

Applying jQuery .animate() to elements without specifying position: absolute

The issue with the left border color not functioning in JavaScript

Angular 8 can sometimes cause CSS to become disorganized upon page load

The overflow-x property causes the left side of the component to be cut off when scrolling

- Challenges with internal systems

Is it possible to create a button on my website that, when clicked, sends data to my Python script?

Why does CSS work on Localhost but not on the server in IE?

Python Automation with Selenium Web Scraping

What is the process for inserting a hyperlink onto an image within a query slider?