how to make a text placed center in DIV?

<DIV>
xxx
</DIV>


how to place text 'xxx' in center of DIV area? help......
oh.....not only horizontal centered, buat also vertical centered......

 

<div style="height: 100px; text-align: center; line-height: 100px; border: 1px solid red;">
centered text
</div>

J.D.

 

Take a look at Vertical Center of a Flash Movie for some information on vertical alignment

 

Which particular post you find useful in this thread?

 

The one by the_pm well as the one by Pauly discussing the difficulties of vertical alignment - something the questioner was asking abount

 

Careful with that thread. One of the posts there uses px as height/width units in HTML, which is no valid HTML. They also discuss how "flawed" vertical-align is. By design, vertical-align is supposed to be used with inline elements to align them vertically along the line box, not to align the content of a block element, like div. It can also be used to align vertically the content of a table cell.

J.D.

 

Maybe you could join that forum and share some thoughts? I know they would appreciate it

 

Leave him alone, he's ours...

 

I'm already spending way too much time in this one When I just started working with CSS, I found vertical-align confusing as well. Here's a little example that shows how it all works:

<style type="text/css">
div {border: 1px solid red; background-color: #FEE; font: 10pt Arial, sans-serif; padding: 0; margin: 1em 0;}
span {border: 1px solid blue; background-color: #EEF; margin: 0; padding: 0;}
</style>

<div>
<b>X</b><span style="vertical-align: top;">top</span>
<b>X</b><span style="vertical-align: bottom;">bottom</span>
<b>X</b><span style="vertical-align: middle;">middle</span>
<span style="vertical-align: baseline;">baseline</span>
<b>X</b><span style="vertical-align: 25%;">25%</span>
<b>X</b><span style="vertical-align: 50%;">50%</span>
<b>X</b><span style="vertical-align: 75%;">75%</span>
<b>X</b><span style="vertical-align: 100%;">100%</span>
<b>X</b><span style="vertical-align: text-top;">text-top</span>
<b>X</b><span style="vertical-align: text-bottom;">text-bottom</span>
<span style="vertical-align: 50px;">50px</span>
<span style="vertical-align: 0;">0px</span>
<span style="vertical-align: -50px;">-50px</span>
<b>X</b></div>

Each inline element (span in this case) is aligned according to its baseline.

Then those that aligned using absolute units (e.g. +/- 50px) are shifted from the baseline by the specified value.

Each element that is aligned with percentage units is shifted by the number of percent of the element's line height.

At this point we have a line box (the padding- and margin-less red div outlines it).

Finally, those elements that have relative positioning, like top or bottom, are shifted to the top or the bottom of the resulting line box.

Hope that explains vertical-align a bit better.

J.D.

 

If you want to be fully centered and use CSS, not inline CSS as someone explains above, you can do something like:

<div id="mybox">
My text in mi box
</div>

Note that to do the following your text will need to have a fixed and known height and weight. Now the CSS

#mybox {
width:200px;
height:100px;
position: absolute;
top:50%;
left:50%;
margin-top:-50px; /* Look: this is the half of the height */
margin-left:-100px; /* and this is the half of the width /*
}

This will place just in the horizontal and vertical middle of the page. You have to play with position:relative/absolute dependind on what you need (maybe you have this box inside a box and need the position to relative).

I hope this helps you. An online example can be found at http://oriera.com/aforo/xhtml/aforoxx.php

Also please advice that this breaks in non modern browsers as IE4 or Netscape 4.

 

The original question was how to center text inside a div, not how to center a div.

J.D.

 

JD,

You have done all you can... don't expend anymore here. I tried your method right away and it worked.

 

I wasn't disputing the technique - it's a good technique when you want to center a block element on the page

As for the one I quoted in my first reply, one thing I forgot to mention is that line-height is inheritable and if may affect other content of the div. If this is the case, you may need to reset the affected elements' line-height to normal (depends on the actual content).

J.D.

 

Sorry, I was not disputing you way, maybe I have explained bad. Yours works, of course.

However: put the mentioned div inside another div. Or use the tag P or the one that keeps semantics in place. The text hasn't to be there alone. Then you have the text centered in to the box.

 

thanks for the TRICK......hehehe
from your example, i know that the "vertical-align:0 px" can't stand alone.
this span need another span that use "vertical-align:50 px" or "vertical-align:-50 px".

 

I would like to post a reply / summarize what has been said in the past posts.

<html>
<head>
<title>Vertical Center</title>
<style>
body {
height:100%;
padding:0px;
margin:0px;
}
table.maintbl{height:100%;width:100%;}
div.maindiv{vertical-align:middle;}

</style>
</head>

<body>
<table class="maintbl">
<tr>
<td>
<div class="maindiv">
<div>
This text should be vertically centered in most browsers.</br>
<center>Use &lt;center&gt; - &lt;/center&gt; for horizontal centering.</center>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>


Please tell me if this does not work in some browsers.
Man Aga

 

Heh heh

I created a DigitalPoint account a long time ago, and I suppose better late than never to add some substance to a thread (our logs are showing a lot of referrals from this thread - I just saw this earlier this evening, hence my tardiness)

Yeah, that was a case of too much awake time and not enough coffee. Pauly knows better. Thanks for pointing it out. I corrected it. It's so rare that the opportunity presents itself to actually declare height and width outside of a style sheet. We're all so used to declaring units of measurement, it's become second-nature

The "flaw" isn't so much in how it works. It's moreso that there seems to be a gaping hole in the standards when it comes to having certain styles available. Obviously, for the purpose of this thread, vertical-align works swell. For the purpose of the IWDN linked from here, it would not work at all, and unfortunately, neither would any other method short of the horizon method I posted, which in testing appears to be very consistent from browser to browser, and quite valid, of course.

We've sent along a few suggestions to W3C with ideas for upcoming CSS specs. Collectively, we have a hefty wish list, including the ability to declare multiple backgrounds on a single block-level container in much the same fashion as borders in the current 2.1 spec (no more nesting!), the ability to vertically align a block-level element inside of a larger container, and the ability to do margin/padding "math" - margin:100%-50px - that sort of thing. If anyone wants to give me their wishlist, I'll probably be stopping in on Eric Meyer in the next couple months. So post away (maybe a new thread would be appropriate for this)!

 

5 months tardy.

 

I know. I know. I'm feeling the shame