Search code examples
javascriptjquerycssalignment

How can I horizontally and vertically center this four divs contents?

I am trying to horizontally and vertically center contents in 4 divs. If I horizontally center the contents then vertical center just gone. If I vertically center the contents then horizontal center just gone.

Here is the FIDDLE

The DIV, part1 is vertically centered and part2, part3 and part4 horizontally centered.

I want all 4 divs contents to be centered vertically and horizontally. How can I do that?

Also some colorful style suggestions appreciated.

Solution

  • .goals has a style applied, but .skills, .rrhelp, and .cur_possi do not. You also need position:relative on .part1, .part2, .part3, .part4. In order to make the text properly centered, since you are setting the .goals, .skills, .rrhelp, and .cur_possi divs to position: absolute, add left: 0; right: 0;

    Updated fiddle: http://jsfiddle.net/21s5u8ys/4/