CODEWITHSUNDEEP
htmlcss
Superunknown
Superunknown

Reputation: 501

Get justified text block to center within a div

I've got a very simple problem here. The title is self explanatory. I know it's a common issue and I'm aware of solutions online. However it's just not working in my case.

I want a justified text block...to be situated right in the very middle of the div.

This is what it looks like now:

enter image description here

I want it to look like this:

enter image description here

I've tried:

margin: 0px, auto;

and the width of the div is already defined.

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;
         margin: 0px, auto;

}


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

and part of the html file

<section id="slide-2" class="homeSlide">
        //background style
         <div class="bcg">
               //container style
                  <div class="hsContainer">

       <h2>
         Lorem ipsum dolor sit amet,
         consectetur adipiscing elit.
         Aenean dictum ligula et tellus tempus,
         id tincidunt sapien ultricies. 
      </h2>
        </div>
        </div>

    </section>

Thanks

Upvotes: 0

Views: 68

Answers (2)

MKreegs
MKreegs

Reputation: 138

In order to just center the <h2> as was pointed out in the comments on this answer, I adjusted the css to the following:

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

#slide-2 h2 {
color: #696d6d;
font-size: 16px;
position:absolute;
top: 50%;
left: 50%
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
line-spacing: 1px;
text-align: justify;
}

the -webkit-transform and -ms-transform are browser prefixes. If you do not add them, the h2 will not be centered in Firefox or IE.

There is a good blog post on this here.

Here is a jsfiddle.

Upvotes: 0

dowomenfart
dowomenfart

Reputation: 2803

To center the h2 element just use this

#slide-2 h2 {
  color: #696d6d;
  font-size: 16px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-spacing: 1px;
  text-align: justify;
}

http://jsfiddle.net/yvr6591t/1/

Upvotes: 2

Related Questions