Centering

November 3, 2009 at 12:00 am 1 comment

Have you ever struggled with centering text, elements, or both? It can be a little tricky, but knowing a few basics can help you get the page to look exactly the way you want it to look. This blog explains how.

Centered Body Page Text

If you want all text on the page centered, add text-align:center to the body style.

CSS

The following page body styles centers white text within the left and right margins. The left margin is 100px and the right margin is auto by default because it is not specified.

body{color:#ffffff; font-family:arial; background-color:#969696;
     margin-left:100px; text-align:center;}

HTML

This is what the HTML looks like:

<h1>Centering</h1>

<p>
The pullover and cardigan sweater instructions assume you have an intermediate knowledge of crochet or knitting. This means you know how to work to gauge, increase, decrease, match pieces, and sew pieces together. If you have this background, it is not difficult to design your own pullover sweater to fit the way you want. You will need an old sweater that fits you the way you want, a stitch you like, yarn you like that works with the stitch, and a little know-how.
</p>

And it renders like this with headings and text centered within the page margins:

bodycenter

Centered Element Text

You can also use the text-align:center style to center text within a specific element, rather than the whole page.

CSS

The following style settings move the text-align:center style from the body tag to it’s own textbox style. The body page has a left and right margin of 10 pixels in this example.

body{color:#ffffff; font-family:arial; background-color:#969696;
     margin:10px; }
*.textbox{text-align:center;}

HTML

This is what the HTML looks like:

<h1>Centering</h1>

<div class=”textbox”>
The pullover and cardigan sweater instructions assume you have an intermediate knowledge of crochet or knitting. This means you know how to work to gauge, increase, decrease, match pieces, and sew pieces together. If you have this background, it is not difficult to design your own pullover sweater to fit the way you want. You will need an old sweater that fits you the way you want, a stitch you like, yarn you like that works with the stitch, and a little know-how.
</div>

And it renders like this with a left-aligned heading and text centered within the text box. The text box does not have left and right margin settings so it stretches the width of the page, but sits within the page left and right margins of 10 pixels.

textboxcenter

Centered Elements

You can size and center an element on the body page or within another element. There are two basic approaches to centering any element:

1. Specify the width and let the browser calculate the left and right margins:

*.center{border: 1px solid #000000;
  padding:3px; text-align:center;
  width: 200px; margin-left:auto; margin-right:auto;}
centerelement

2. Specify the margins and let the browser calculate the width:

*.center1{border: 1px solid #000000;
  padding:3px;  text-align:center;
  width: auto; margin-left:100px; margin-right:100px;}
centerelement1

You can center an element within another element. This examples horizontally centers text within a textbox that is horizontally centered within a parent box that is horizontally centered on the page.

CSS

*.center{border: 1px solid #00008b; padding:30px; height:auto; width:50%;
 margin-left:auto; margin-right:auto;}

*.textbox{border: 1px solid #000000; padding:3px;
 height:auto; width:auto; text-align:center;}

HTML

<div class=”center”>
<div class=”textbox”>
The pullover and cardigan sweater instructions assume you have an intermediate knowledge of crochet or knitting. This means you know how to work to gauge, increase, decrease, match pieces, and sew pieces together. If you have this background, it is not difficult to design your own pullover sweater to fit the way you want. You will need an old sweater that fits you the way you want, a stitch you like, yarn you like that works with the stitch, and a little know-how
</div>
</div>

And it looks like this:

concentric

If you change the parent box to use absolute or fixed positioning, you can use left, right, top, and/or bottom to position it against the respective border of the view port if you used fixed positioning or of its parent if you used absolute positioning.

CSS

In this example, the parent uses fixed positioning with the bottom:0 property so the concentric elements and text sit  on the bottom border of the view port. You can read about positioned elements by browsing the Positioning Elements category of this blog.

*.center{position:fixed; bottom:0; left:0; border: 1px solid #00008b; padding:30px; height:auto; width:50%;
 margin-left:auto; margin-right:auto;}

*.textbox{border: 1px solid #000000; padding:3px;
 height:auto; width:auto; text-align:center;}

HTML

<div>
<div>
The pullover and cardigan sweater instructions assume you have an intermediate knowledge of crochet or knitting. This means you know how to work to gauge, increase, decrease, match pieces, and sew pieces together. If you have this background, it is not difficult to design your own pullover sweater to fit the way you want. You will need an old sweater that fits you the way you want, a stitch you like, yarn you like that works with the stitch, and a little know-how
</div>
</div>

And it looks like this:

anchored

Entry filed under: Design Tips, See All. Tags: , , , .

Styling Background Images Vertical Centering

1 Comment Add your own

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Trackback this post  |  Subscribe to the comments via RSS Feed


Recent Posts

Blog Stats

  • 86,348 hits

Archives


%d bloggers like this: