The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS centering text on left or right half of page

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #173509

    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>

    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.


    It’s not clear to me what precisely you are trying to do but I think you’re looking for something like this


    Wouldn’t just using text-align:center; solve your issue as it would automatically center the text within it’s parent containing Div?

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.