I’d like to be able to center text on either the left or right half of the page which is 1280px wide by 800px height. The body of text would need to be centered using center align, right align, and left align. It would also be nice to have a margin of some sort all around the text. This is what I have so far and it seems to be working but I’m not sure if I’ve left something out or if the markup could be better. Can anyone help?
css markup
div.sglspread {
position: absolute;
background-repeat: no-repeat;
width: 1280px;
height: 800px; }
.leftcenterText {
position: absolute;
background-repeat: no-repeat;
text-align: center; }
.pg1-2-txt {
position: relative;
top: 360px;
line-height: 110%;
width: 460px;
margin-left: 90px; }
html markup
<div class="leftcenterText">
<div class="pg1-2-txt">
<p>All text will center on the left half of the page.
All text will center on the left half of the page.</p>
</div>
</div>
I can change the orientation using text-align from center, left or right using the class (leftcenterText).
Then to center the body of text I just do some math using
width and margin-left from the class (pg1-2-txt).
To center text on the left half I used 640px wide, half of the page width, and I wanted the text to be a width of 460px. That leaves me 180 pixels. To center the body of text I used margin-left and put 90px, half of 180 leaving 90 pixels on both sides.
It seems to work but it also seems to be too much work. I’d like to set the width of the body of text and it auto centers. But I am having trouble figuring it out. Any help is welcome, please, thank you.
