CODEWITHSUNDEEP
css
David Van Staden
David Van Staden

Reputation: 1779

Aligning text center and then left

Good Day

I want to align text in the center of a div. Now that is easy with text-align: center on parent div.

But If I want to left align the text inside the div to the left of the centered div, how do I do that?

See my fiddle: http://jsfiddle.net/DvXzB/5/

HTML:

<div id="aboutContent" class="row-fluid">
    <div id="aboutHeaderText" class="span12"><span title="">About Us</span></div>
    <div id="aboutHeaderBody" class="span12">
        <p><a title="">asdasd</a> is a free mobile application available for <a href="#"
            title="">iOS</a>, <a href="#" title="">Android</a>and the <a href="#" title="">Blackberry</a> operating
            systems.</p>
        <p>sdefsadfsdfldflkjlj lkjlkjdlfsldfjlkj ljlsdjflj lkj ljklj lk; ;l;l; ;k;k
            l;kgjh jhg gjjh jhgjhgjh jhgjh gjg jgjhgjg</p>
        <div id="cities"><a title="">asdasdasd</a> currently only displays events and
            specials in <strong>asdasd</strong> (our hometown), but the following locations
            will be available before you know it:
            <ul>
                <li><span>asdg</span>

                </li>
                <li><span>asdwn</span>

                </li>
                <li><span>Pasdasdroom</span>

                </li>
                <li><span>Dasdaf</span>

                </li>
                <li><span>Bergrin</span>

                </li>
                <li><span>Sersch</span>

                </li>
                <li><span>Graergwn</span>

                </li>
            </ul>
        </div>
        <p>Visit our <a href="" title="" target="_blank">Facebook page</a> for more
            up to date information, and feel free to <a href="" title="">contact us</a> with
            any queries.</p>
        <br />
    </div>
</div>

CSS:

#aboutContent {
    color: #222;
    margin-top: 50px;
    margin: 0 auto;
    text-align: center;
}
#aboutHeaderText span {
    font-family:"Kozuka Gothic Pr6N", sans-serif !important;
    color: #eeeeee;
    font-size: 26px;
    font-weight: bold;
}
#aboutHeaderText img {
    margin-top: -18px;
    margin-left: 8px;
}
#aboutHeaderBody {
    position: relative;
    padding: 0px;
    font-size: 16px;
}
#cities ul {
    list-style: none;
    margin-top: 10px;
}
#cities ul li {
    font-family:'Open Sans', sand-serif;
    padding: 3px 0px;
    font-size: 20px;
    color: #222;
}

I want the text in the middle of the page to be justified, but when I justify or left align it, it aligns it to the absolute left again. How do I do this without using fixed paddings or margins? Basically what I want is what they have on this page here(see the 'about us' section): http://www.villagebicycle.co.za/

Note: I am using a fluid layout, so fixed paddings etc won't work

Thank you

Upvotes: 0

Views: 3192

Answers (2)

newpatriks
newpatriks

Reputation: 581

You've to use a wraper div to envolve all content. I've done a JsFiddle, I think is what you're looking for :)

.wraper {
    position: relative;
    width: 500px;
    margin:0 auto;   
}

Afther that you can align a <p> to the left, right, justify, etc. as you can see:

    p.left{text-align:left;}
    p.justify{text-align:justify;}

And the HTML for testing:

<div class="wraper">
        <p class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>

    <p class="justify">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>

</div>

Upvotes: 1

otinanai
otinanai

Reputation: 4025

You need to center align the container with margin:0 auto after setting its width to a specific size like width:400px. Then align each element separately using text-align.

See this demo: http://jsfiddle.net/DvXzB/16/

If you want your container to have 100% width then do not use text-align:center to your parent div. Instead, use width:100% (optional) and again text-align each block as desired.

Upvotes: 2

Related Questions