CODEWITHSUNDEEP
cssalignmentcenter
starbucks
starbucks

Reputation: 3016

How can I center the block of text without the next line being centered relative to the top line?

I need to center the text. I used text-align center but the next line gets centered. I need it to be aligned to the line on top. 

<div class="box">
<div class="text">Some text.Some text.Some text.Some text.Some text.Some text.Some text.
    Some text.Some text.Some text.Some text.Some text.</div>
</div>

How can I center the block of text without the next line being centered relative to the top line?

http://jsfiddle.net/heQ9H/

Upvotes: 1

Views: 126

Answers (3)

Marc Audet
Marc Audet

Reputation: 46785

In the simplest example, all you need is the following:

.box {
    width: 510px;
    background-color: red;
    margin: 0 auto;
}
.text {
    color: #fff;
    font-size: 15px;
}

You have a block container (.box) with a fixed width, and you center it with respect to its parent container by applying margin: 0 auto.

Depending on other formatting needs (for example, multiple background images or a hook for special JavaScript actions), the .text element may not be needed.

Fiddle: http://jsfiddle.net/audetwebdesign/heQ9H/3/

Upvotes: 1

Matt
Matt

Reputation: 2550

Example: http://jsfiddle.net/heQ9H/2/

Make the box 100% width of it's container. The text then becomes centered inside of it with a set width of 510px. I think this may be what you are looking for.

.box {
    width: 100%;
}
.text {
    margin: 0 auto;
    width: 510px;
}

Upvotes: 1

Mr. Alien
Mr. Alien

Reputation: 157314

One cheap way to do this is to wrap the text inside an element which you've already did, get the nearest width, where your text just ends perfect instead of wrapping to other line leaving a large space on the right, and than use margin: auto;

Demo

.text {
    width: 490px;
    margin: 0 auto;
}

Upvotes: 1

Related Questions