/    Sign up×
Community /Pin to ProfileBookmark

Help – wont center

Copy linkTweet thisAlerts:
Oct 04.2006

Can someone please tell me why the MAIN POINTS are not centering in Firefox ? ?

Code:

[code=html]<div id=”read” class = “pop-box” style=’font-size:16px; width:700px; hieght:800px; position:absolute;left:190px; top:200px;’>
<span style=”font-size:20px; font-weight:bold; text-align:center;” >MAIN POINTS</span>
<br><br><br>[/code]

Thanks ?

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelOct 04.2006 — <div id="read" class = "pop-box" style='font-size:16px; width:700px; [B]height[/B]:800px; position:absolute;left:190px; top:200px; border:1px solid black;'> [B]<div style="position:relative; width:150px; margin: 0 auto; font-size:20px; font-weight:bold; border:1px solid black;" >MAIN POINTS</div> [/B]<br><br><br></div>[/QUOTE]

Don't know if you can center a "span", but to center anything, it needs to have a width, and position:relative, then apply margin:top auto to it. This above, works.

Also, you mispelled "height" (corrected in example shown). ? I'm sure there's other ways of doing this though.
Copy linkTweet thisAlerts:
@DaveinLondonauthorOct 04.2006 — Thanks for your help.

I used div instaed of span - like you said - added the width and kept the center.

<div style=" width:700px; font-size:20px; font-weight:bold; text-align:center; " >MAIN POINTS</div>

Works fine ?
Copy linkTweet thisAlerts:
@WebJoelOct 04.2006 — Thanks for your help.

I used div instaed of span - like you said - added the width and kept the center.

<div style=" width:700px; font-size:20px; font-weight:bold; text-align:center; " >MAIN POINTS</div>

Works fine ?[/QUOTE]
I started to ammend my post to include "text-align:center" which is this case would work better than my solution. You see I gave both DIVs borders, and the text part isn't exactly 'centered' in my solution. The text is a bit left-justified if you measure closely. -It's the inner DIV that is centered.

A more semantic solution yet, -if that text is a 'header' to some additional text as it appears to be, is to use the <h></h> tag instead of a nested DIV, and center that using STYLE.
Copy linkTweet thisAlerts:
@jtillwickOct 04.2006 — A better solution is this:
[CODE]
<style type="text/css">
.pop-box {
position: absolute;
left: 190px;
top: 200px;
width: 700px;
height: 800px;
}
.centered {
display: block;
font-size: 20px;
font-weight: bold;
text-align: center;
}
</style>
<div id="read" class="pop-box">
<span class="centered">MAIN POINTS</span>
<br />
</div>[/CODE]
[B]Get used to using standard xhtml![/B]

Alternatively, you don't appear to need to have the div positioned absolutely. I see no need here.
[CODE]
<style type="text/css">
.pop-box {
margin: 0 auto; /* centers the 700px div, works in Firefox, Opera, and IE 5.5+ */
width: 700px;
height: 800px;
}
.centered {
display: block;
font-size: 20px;
font-weight: bold;
text-align: center;
}
</style>
<div id="read" class="pop-box">
<span class="centered">MAIN POINTS</span>
<br />
</div>[/CODE]
[B]Get used to using standard xhtml![/B]

Any element that is specifically set to display: block; will allow text centering.

By default a span is an inline element. This means that you can not adjust it's height or width. Its size is determined by what is inside of it. Also, being an inline element means that it will sit next to any other inline element without needing to float.

The problem with setting a span to display: block; is that it will act as any other block element. Which means it will stretch the entire length of the element it is contained in. This also means that any other element appearing after it in html will be pushed down to the next line.
Copy linkTweet thisAlerts:
@DaveinLondonauthorOct 05.2006 — Thanks

good advice! ?
×

Success!

Help @DaveinLondon 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.15,
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,
)...