Learning Web Design - Ch 12 Centering Text Example

Ch 12 - Centering Text Example

Centering Text example

Here is an example of centering text and centering elements (in this case a <p> element):

<!DOCTYPE html>

<html>

<head>

<style>

p {

margin: auto;

width: 12em;

border: black 1px solid;

padding: 5px;

}

</style>

</head>

<body>

<h2 style="text-align: center; border: black 1px solid; padding: 5px;">Center Text</h2>

<p>This rather narrow block of text is centered. Note that the lines inside the block are not centered (they are left-aligned).</p>

</body>

</html>

The image below shows how this displays in a browser. The <h2> element is a block element, so it stretches all the way across the page.

Report abuse