Centering left-aligned text using CSS

I am working on a page that has 3 columns of text. I am trying to center the text in each column while maintaining the left justification for the text.

When I try to use margin-left:auto; margin-right:auto; the spacing for the columns is destroyed. I have also tried putting a div around the paragraphs and tried to center that, but either I am doing something wrong or it isn't affecting anything.

Here is a link to a page that shows the text and how they are not working. http://pages.suddenlink.net/salisburra/index2.html

Thanks so much for any help you can provide =)

This is the html from the page:

...
<body>
 <div class="tripletBox linkBlock">
	<p>
	Suggested Itinerary
		Brochures
	</p>
</div>
<div class="tripletBox linkBlock">
	<p>
		Lesson Plans
		Cool Sites
	</p>
</div>
<div class="tripletBox linkBlock">
	<p>
		Featured Images
		Opportunities
	</p>
</div>
</body>

Here is the css applying to the html:

body {
   margin-left: auto;
   margin-right: auto;
   min-width:1020px;
   max-width:1020px;
   ...
}

.tripletBox{ 
float:left;
width:26.36%;
margin-left:3.48%;
margin-right:3.48%;

}


.tripletBox > * {/*centers images in the tripletBox container*/
   display:block;
   margin-left:auto;
   margin-right:auto;
}

.linkBlock {
     ...
     text-align:left;
}

PopeJareth

Light Poster

29 posts since Jun 2009

Reputation Points: 11

Solved Threads: 3

2 Years Ago

0

I think I understand what you're trying to do.

You are using a "double" class:

<div class="tripletBox linkBlock">

I don't think you can do that.

I think you should define 3 DIVS, for instance width 33% for each.
Keep the "margin:auto" definitions.
Inside each of them, place a new block where the text-alignment is "left".
For instance:

<div class="tripletBox">
<div class="linkBlock">
Your text
</div></div>

Other suggestion: Remove the definition of body width. The body should fill the window, and it will if you omit it.

I haven't tried this, but I think it should work.

ingeva

Junior Poster

106 posts since Jul 2008

Reputation Points: 16

Solved Threads: 9

2 Years Ago

0

I use multiple classes all the time. As long as they don't contradict each other, it works great.

Use text-align: center; to center text. The margin works on everything else, but not text.

Remember that any surrounding styles (margin, border, padding) are rendered OUTSIDE any size style (width, height) you define. So you need to leave extra room for the surrounding styles to fit into.

MidiMagic

Nearly a Senior Poster

3,319 posts since Jan 2007

Reputation Points: 730

Solved Threads: 182

2 Years Ago

0

I use multiple classes all the time. As long as they don't contradict each other, it works great.

OK! I'll take that as a tip. Wouldn't have thought it was possible. You learn something every day.

ingeva

Junior Poster

106 posts since Jul 2008

Reputation Points: 16

Solved Threads: 9

2 Years Ago

0

Use text-align: center; to center text. The margin works on everything else, but not text.

That was my first attempt, but using text-align:center made the text center but with out a left justified look

ex ------ ------------ -------

instead of --------- --------- ---------

I also feel that Ingeva's idea should work, but when I actually implement that, nothing changes.

Thanks again for your help =)

PopeJareth

Light Poster

29 posts since Jun 2009

Reputation Points: 11

Solved Threads: 3

2 Years Ago

0

I think I have come up with a small hackjob of a solution. If I add

.linkBlock p{
    margin-left:80px;
}

Then the text is lined up with their above headers, and nothing strange is happening with the floating divs.

What do you guys think about this (slightly tacky) solution?

PopeJareth

Light Poster

29 posts since Jun 2009

Reputation Points: 11

Solved Threads: 3

2 Years Ago

Show Comments

1

I think I have come up with a small hackjob of a solution. If I add
.linkBlock p{
    margin-left:80px;
}
What do you guys think about this (slightly tacky) solution?

I'm sorry I haven't looked at this. It might work.
But I think I wasn't clear enough in my first post.
If I may say so, your stylesheets looked like overkill, but I realize
that you also have other things in mind with your HTML.

I have re-written your HTML and stylesheet a little. I've used borders and background colors to indicate "what's what". I ignored the text images and use text instead. You can use images of course, but text is faster and more elegant. You can still use varying colors.

I try to avoid fixed sizes, like font sizes in pixels. I do that only once: in the body style. Otherwise I specify sizes as "em" or percent. With my example, vary the width of the window and see how everything follows. This reduces horizontal scrolling, but be aware that you can get some folding of DIVs that are too wide in a narrow window.

A design should be as simple as possible. Here I ended up with 4 levels of DIV, which I really think is too much, but an easier option (to write) is with a table, and that's not always considered "kosher".

My suggestion can be found here: http://intertrafico.com/helper

Hope you can make it work just the way you want it.

ingeva

Junior Poster

106 posts since Jul 2008

Reputation Points: 16

Solved Threads: 9

2 Years Ago

0

Thanks ingeva =)

This works wonderfuly. Too bad there isn't a simpler soultion. (that is concidered "kosher")

Maybe it can be easier once css3 comes out =)