CODEWITHSUNDEEP
htmlcss
starbucks
starbucks

Reputation: 3016

How do I make the text in the next line to be centered and not aligned to the left?

I have a div that has the following CSS: 

 .div_stuff {
 width: 830px;
 margin: 20px auto;
 font-size:22px;
 }

How do I prevent the text that goes to the next line to not align left right under the text above but simply become centered on the next line?

Upvotes: 1

Views: 3512

Answers (3)

Marcel Gwerder
Marcel Gwerder

Reputation: 8520

Although I'm not sure if I understood what you want to achieve and I can't find a use case for this... Changing the alignment from the second line on would be possible by adding some span tags with javascript/jQuery (DEMO):

$(function() {
    var box = $('.div_stuff');
    var text = box.text();

    var words = text.split(' ');
    box.text(words[0]);
    var height = box.height();
    var chars = 0;
    for(var i = 1; i < words.length; i++){
        box.text(box.text() + ' ' + words[i]);
        chars += words[i-1].length + 1;
        if(box.height() > height){
            height = box.height();      
            box.html('<span class="first-line">' + text.substring(0,chars) + '</span><span class="following-lines">' + text.substring(chars+1, text.length)+'</span>');
            break;
        }
    }
});

And set a different alignment to them:

span {
    display: block;
}

.first-line {
    text-align: left;
}

.following-lines {
    text-align: center;
}

I've used that answer for determining auto line breaks.

Upvotes: 2

Francisco Zarabozo
Francisco Zarabozo

Reputation: 3751

Add text-align: center to center the text inside. You are centering the div position only.

Upvotes: 2

Mehul Kaklotar
Mehul Kaklotar

Reputation: 375

you can try css3 text justified

http://www.w3schools.com/cssref/css3_pr_text-justify.asp

Upvotes: 0

Related Questions