Centering selected text within a div

Forum Moderators: not2easy

Message Too Old, No Replies

Centering selected text within a div

directrix

10:07 pm on Jun 10, 2005 (gmt 0)

I have what seems like a simple requirement. I have two very short sentences that I'd like to appear on the same line. I'd like sentence 1 to be left-aligned, and sentence 2 to be centered. What's the easiest way to do this? The HTML is as below.

<div>Sentence 1.<span>Sentence 2.</span></div>

zackattack

10:57 pm on Jun 10, 2005 (gmt 0)

Hi directrix

You could use this:

CSS:

#container {
text-align: center;
}
.left {
float: left;
}

HTML:

<div id="container"><span class="left">Sentence 1</span>Sentence 2</div>

With this you are using the span to float the text left as the container div is center aligned by using the text-align property

directrix

11:20 pm on Jun 10, 2005 (gmt 0)

Thanks zackattack -- a creative solution! It works reasonably well, but unfortunately sentence 2 is pushed right (from center) by the length of sentence 1, so that it ends up not being centered. Even though sentence 1 is short, it doesn't look quite right.

zackattack

11:31 pm on Jun 10, 2005 (gmt 0)

mmnn a little difficult to know exactly what you are trying to do without seeing it, can you show some more code

I may be able to help if I can see a little more

directrix

11:53 pm on Jun 10, 2005 (gmt 0)

Thanks for trying to help.

The above is really all there is to it. Sentence 1 is "Last updated: June 10, 2005"; sentence 2 is "© #*$!x yyyyyy, 2002-5". I'd like the copyright statement to appear centered, and "Last updated" to be left-aligned, on the same line. Enclosed in a div rather than a table, if possible.

Thanks again.

D_Blackwell

12:44 am on Jun 11, 2005 (gmt 0)

Pixel perfect seems a bit tricky with this. zackattack gave a good 'approximation'. Here is another. It's not perfect, but is quick, easy, and easily tweaked. (Anybody got the pixel perfect solution?)

<html>
<head>
<style>
body {
font-size: 1.2em;
}
dt, dd {
display: inline;
}
dd {
margin-left: 18%;
}
</style>
<head>
<body>
<div>
<dl>
<dt>
Last updated: June 10, 2005
</dt>
<dd>
© #*$!x yyyyyy, 2002-5
</dd>
</dl>
</div>
</body>
</html>

directrix

9:31 pm on Jun 12, 2005 (gmt 0)

I found a solution to this problem. While not exactly elegant, it does appear to work on a variety of browsers. Surely there's an easier method!

#container {line-height:1.2em}
#copy {margin-top:-1.2em; text-align:center}

<div id="container">Last updated: June 10, 2005
<div id="copy">Copyright zzzz yyyyyy, 2002-5</div>
</div>