My continuing adventures with CSS based left-right centering of <div> <p> text and <img>. This text is enclosed with unstyled <p> tags within the <body>. Steven G.

The div (width: 75%;) is centered using margin-left: auto; margin-right: auto; in the style sheet. This text is inside the div but not enclosed in any tags.

This text is enclosed by <p> tags (width: 95%;) The paragraph is not centered in the div. The text is not centered in the paragraph.

This paragraph<p class="centered_left_right"> is centered inside the div using margin-left: auto; margin-right: auto; in the style sheet but the text is not centered.

This <div class="centered_left_right"> is centered inside the containing <div> using margin-left: auto; margin-right: auto; and this text is centered using text-align: center;

pi squared logo

The <img> above is wrapped with a <p> styled with margin-left: auto; margin-right: auto; text-align: center; but this text is inside the div but not enclosed with <p> tags.

pi squared logo
The img above is wrapped in a <p> tag styled using margin-left: auto; margin-right: auto; text-align: center; The </p> closing tag is followed by a <br />tag.

pi squared logopi squared logoThis text is enclosed by <p> tags (width: 75%;) The paragraph is not centered in the div. The text is not centered in the paragraph. One img is styled using float: left; the other float: right;

pi squared logo

Wrap a div styled with margin-left: auto; margin-right: auto; text-align: center; around two paragraphs that inherit the styles from the div. The img is wrapped in the first <p> and this text is wrapped in the second <p>