/    Sign up×
Community /Pin to ProfileBookmark

Center align div but not text

Copy linkTweet thisAlerts:
Jan 10.2006

I want to align the div menu bar to center but not the text, how?

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@BonRougeJan 10.2006 — #element {
width:[I]value[/I];
margin:auto;
}
Copy linkTweet thisAlerts:
@BOB101authorJan 10.2006 — BonRoque can you give a better explanation with the code, like what should I put and stuff, cuz the code didn't work.
Copy linkTweet thisAlerts:
@The_Little_GuyJan 10.2006 — I would use this

The CSS
[code=html]
#element {
width:value;
margin:auto;
}
[/code]

The HTML
[code=html]
<div id="element">text text text text texttexttexttext text text text</div>
[/code]
Copy linkTweet thisAlerts:
@NogDogJan 10.2006 — You need to replace the "value" for width with a fixed amount, such as 600px or 20em. When you assign the value "auto" to the left and right margins of a fixed-width block element, it will be centered by the browser. For example:

CSS:
<i>
</i>.centered {
width: 500px;
margin: 0 auto;
}


HTML:
<i>
</i>&lt;div class="centered"&gt;
blah blah blah blah
&lt;/div&gt;
Copy linkTweet thisAlerts:
@ManiaJan 10.2006 — The examples given here seem to work fine in Firefox, but I don't see anything happening in IE (6.0). I wanted to do my web-pages with divs, but because the positioning gave me such a hard time I switched back to using tables (align:center works like a charm). Then again I may have done something wrong?
Copy linkTweet thisAlerts:
@ManiaJan 10.2006 — Well, got it working now with IE too. I added another div to hold the other one and put that one to align center.

CSS:
[CODE]
#main {
text-align:center;
}

.centered {
border:1px solid;
width: 500px;
margin: auto;
}
[/CODE]

HTML:
[CODE]
<div id="main">
<div class="centered">
<p>blah blah blah blah</p>
<p>blah blah blah blah</p>
</div>
</div>
[/CODE]
Copy linkTweet thisAlerts:
@BonRougeJan 10.2006 — If that (the code we posted) doesn't work in IE6, I guess you don't have a complete DTD at the top of your page, so IE is running in quirks mode, which is, well... quirky.
×

Success!

Help @BOB101 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...