Assigning a width..can’t center??

@ajmcloughlinAug 24.2011

I’ve been negotiating around this issue for a while but its become to much of a hinderance.
I can’t seem to assign a width to an element whilst at the same time using text-align:center; in the same div #.
Any reasons?? I bet i’m missing something simple here but its time to face up to my ignorance haha.

Cheers

to post a comment

HTML

@Frank62Aug 24.2011 — #Can you post the code? That probably makes it easier to understand what exactly you're trying to achieve. See my signature for how to post the code.

@cbVisionAug 24.2011 — #I've created an example here to show you how text-align and div centering works:

http://jsfiddle.net/dfreema1/PQMnd/

As you can see, both have a width of 300px; however only the 2nd div is actually centered. The key is the "margin 0 auto;" piece. The text-align property centers the text within the div; however doesn't center the div itself. I'm guessing this is the issue you're running into.

@Major_PayneAug 25.2011 — #The text-align: center; does just that...align text to center. If you want the containing element centered, use margin: 0 auto; . Examples:

[CODE]body {
 width: 90&#37;;
 height: 600px; /* optional */
 margin: 0 auto;
 background: #fff url(path to non-tiled image) no-repeat center scroll;
 }[/CODE]

Example as a Class:

[CODE].selector_name {
 width: 90%;
 height: 600px; /* optional */
 margin: 0 auto;
 background: #fff url(path to non-tiled image) no-repeat center scroll;
 }[/CODE]

HTML for Class: [CODE]<div class="selector_name">Content here</div>[/CODE]

Example as an ID:

[CODE]#selector_name {
 width: 90%;
 height: 600px; /* optional */
 margin: 0 auto;
 background: #fff url(path to non-tiled image) no-repeat center scroll;
 }[/CODE]

HTML for Class: [CODE]<div id="selector_name">Content here</div>[/CODE]

Change parameters as you need. Set "#fff" to background color you want. Set "scroll" to "fixed" if you want page contents to scroll over background image. CSS was given for an image that does not tile. Doesn't have to be the body tag, but you should get the idea.

@ajmcloughlinauthorAug 25.2011 — #perfect thanks a lot people, problem sorted! x

Assigning a width..can’t center??

4 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Assigning a width..can’t center??

4 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #HTML _↴