homepage Welcome to WebmasterWorld Guest from 54.196.196.108
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / WebmasterWorld / New To Web Development
Forum Library, Charter, Moderators: brotherhood of lan & mack

New To Web Development Forum

    
How to put text in middle of page, but not "center" the text
Want it left justified I think
anon123




msg:4104552
 4:51 pm on Mar 25, 2010 (gmt 0)

Hi,

I want the text to be in the middle of the page, but I don't want the text to be "centered" like it does when you just use the <center> tag.

In other words
I want the lines to look like
this. All nice
and even on the left.

rather than having the lines look like this. example sentence
typing typing typing blah blah
blah test test test


But just in the middle of the page.

Does anyone know an easy way to do this?

Does this have to be done with tables maybe?

 

Demaestro




msg:4104563
 5:02 pm on Mar 25, 2010 (gmt 0)

Anon,

In order to do this, use margin:0 auto; to center the div, define it's width and set text-align:left;

This works
<div style="margin:0 auto; text-align:left; width:200px;">
This is a bunch of text. This is a bunch of text. This is a bunch of text. This is a bunch of text This is a bunch of text This is a bunch of text This is a bunch of text This is a bunch of textThis is a bunch of textThis is a bunch of textThis is a bunch of textThis is a bunch of textThis is a bunch of textThis is a bunch of textThis is a bunch of text
</div>

anon123




msg:4104573
 5:16 pm on Mar 25, 2010 (gmt 0)

Hi, it didn't work for some reason.

I think the <center> tag is over-riding the text-align left part, because the margins changed, but the text is still centered in that funky way.

Maybe rather than using the <center> tag to get the text to the middle of the page, I need to do something else?

Demaestro




msg:4104578
 5:20 pm on Mar 25, 2010 (gmt 0)

Ya don't use any center tag...

The code I posted will work as is. Just alter the width value to get it the size you want.

This entry will center the div -> margin:0 auto;
so you don't need to use a center tag.

mack




msg:4104583
 5:32 pm on Mar 25, 2010 (gmt 0)

No matter what a page looks like it is built out of rectangular sections...

On the web even a circle is built out of rectangles. A div is a term used to refer to such a region.

Lets say you have a simple page with a header, a left menu, main content area and a footer. Each of these sections is a rectangle and can be declared as a div.

When you specify a div you can assign values to a div. The values will be passed to items within the div they relate to.

<div style="margin:0 auto; text-align:left; width:200px;">
Your text here
</div>


Hope this helps.

Mack.

anon123




msg:4104587
 5:34 pm on Mar 25, 2010 (gmt 0)

Ohh OK, thanks I got it to work, but I don't think this will work for what I'm trying to do.

This is going in my style sheet which affects about 200 different pages, and unfortunately I can't come up with 1 width value since each pages text is different.

In other words, the width at 200px looks good for 1 page, but makes the text on other pages look messed up.

Is there any other way to do this?

StoutFiles




msg:4104588
 5:37 pm on Mar 25, 2010 (gmt 0)

You can use %'s instead of exact pixel values.

anon123




msg:4104590
 5:42 pm on Mar 25, 2010 (gmt 0)

Just for some clarification:

These are song lyrics that have line breaks using the <br> tag.

So for some pages a lyric would look like this:

Jumpin' jack flash is a gas, gas,
gas.
But it's all right now, in fact it's
a gas!


And of course I only want it to line break when the <br> tag shows up.

Would % sign work for this?

anon123




msg:4104594
 5:59 pm on Mar 25, 2010 (gmt 0)

Nope, percent cut's it off too.

Hmm, back to the drawing board.

Any other ideas?

Demaestro




msg:4104597
 6:05 pm on Mar 25, 2010 (gmt 0)

That is going to be tough to do in 1 css file because each song could have 1 line that pushes it out.

To be honest. This isn't bad/
Jumpin' jack flash is a gas, gas,
gas.
But it's all right now, in fact it's
a gas!


Because this is a common issue on the web people have become used to seeing a line break not always in the best place.

To me that doesn't look bad and I can still tell where a new line is meant to go.

If you want you could go manually override each width page by page but at 200 pages this will become tedious and as you add more pages you will see that it can become a nightmare to upkeep.

Come up with what the averge width would be... lets say 300 as an example.

Your css would like like this:

.center_div {
margin:0 auto;
text-align:left;
width:300px;
}

Then your div would look like this:

<div class="center_div">
Your text here
</div>

If you need a width other than 300px, lets say 400px, then in the div you override the CSS width definition by adding a width to the div itself.

So a div with an overriding width would look like this.

<div class="center_div" style="width:400px;>
Your text here
</div>

Browsers will override anything defined in CSS if there is a conflicting value defined right on the object itself.

So for any divs where 300px doesn't work you would have to add that overriding value on the div. It is a lot more work though.

I would be fine to just use an average width and if it wraps funny for some.. oh well, people won't be turned off by it, and shouldn't be confused either.

You could use percent but I think you would have the same result and would need to override it on some pages.

Percent would work like this.

Lets say the <div> is in another div that is set to 800px... using 40% would give you a width of 320px;, but if it is always going in a 800px container then 40% will always be 320px so you have the same problem as no matter if you use width:320px or width:40%

anon123




msg:4104605
 6:21 pm on Mar 25, 2010 (gmt 0)

Your right, I went with 25% on the width (which I think is around 300px) and it does slightly mess up some pages, but for the most part it looks good.

Better than the text in the center tag look.

It doesn't bother me and I don't think it will affect the users much either.

I'll go with this.

Thanks for all your help everyone.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / WebmasterWorld / New To Web Development
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved