CODEWITHSUNDEEP
htmlcss
Superunknown
Superunknown

Reputation: 501

CSS text justification won't center

I've got a bit of a daft problem here. I'm trying to centre justify a paragraph so it looks like this:

enter image description here

Instead...it looks like this:

enter image description here

I want a paragraph which is totally straight. This applies to < h2 > paragraph < /h2 >

I've tried:

text-align: justify;

and

text-align: center;

This is the css for slide 2

/*slide 2 */
#slide-2 .bcg {
position: relative;
background-color: #1C1C1C;
padding:200px;
}

slide-2 .hsContent {
        position: relative;
}

slide-2 .hscontainer {
        width: 100%;
        height: 80%;
        overflow: hidden;
        position:relative;
}
#slide-2 h1 {
               /*  background-color: rgba(0,0,0,0.6);*/
                margin-top:0;
                 padding:20px;
                color: #d2d2d2;
                font-size: 30px;
                line-height: 20px;
                 position: relative;
               text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
}

#slide-2 h2 {
                 bottom: 10px;
                 color: #696d6d;
                 font-size: 16px;
                 line-height: 150%;
                 position: absolute;
                 line-spacing: 1px;
                 text-align: justify;
}

Upvotes: 0

Views: 71

Answers (1)

Megajin
Megajin

Reputation: 2768

You can try CSS3 hyphens with attributes none | manuel | auto

The hyphens property controls hyphenation of text in block level elements. You can prevent hyphenation from happening at all, allow it, or only allow it when certain characters are present.

.textclass{ 
hyphens: auto; 
text-align: justify
}

If you don't want to use the code above you can try to write your break lines a little bit differently.

It can appear that your tags are overriding something.

Try:

<br />
<br></br> 
</br>

any of these should do the trick.

Upvotes: 1

Related Questions