Vertical and Horizontal Centering on Slides (using parallax plugin)


I'm having a bit of trouble with my CSS. Essentially, I have a website, in which I use a jquery parallax plugin to scroll from slide to slide using a navigation bar. I would like some content to be centered horizontally and vertically on the screen on multiple slides however I am not able to.

The first slide simply has some text in, and I have managed to dead-centre it. I have another slide, where I have a line of text at the top of the slide (to the left of the screen) and 3 social media icons in the centre (quite large). Here is the my wireframe for the slide: enter image description here

I have tried to use the table method and vertical align, however when I add the text above the icons, it all moves to the right, and the text is on two lines. I understand why this happens however I can not think of any way to fix the problem.

Here is my HTML for the Social Media slide:

<div class="slide" id="slide2" data-slide="2">
        <div class="social-media">
            <div class="social-media-title">
                <h1> Social Media </h1>
            </div>
            <div class="social-media-icons facebook"></div>
            <div class="social-media-icons twitter"></div>
            <div class="social-media-icons linked-in"></div>
        </div>
        <a class="button" data-slide="3" title=""></a>
    </div><!--End Slide 2-->

And my CSS:

* {margin:0;padding:0}
html,body {height:100%;}
.slide
{
    width:100%;
    height:100%;
    display:table;
    text-align:center;
}

#slide1
{
    background-color:red;
}
.title {
    display:table-cell;
    vertical-align:middle;
}
.title h1
{
  font-weight:100;
  font-size: 2em;
  text-align: center;
}

#slide2
{
    background-color:green;
}

.social-media-title 
{
    display:table-cell;   
}


.social-media-icons {
  height: 100px;
  width: 100px;
  margin: 10px;
  border-radius: 50%;
  -webkit-transition: all ease 0.3s;
  -moz-transition: all ease 0.3s;
  -o-transition: all ease 0.3s;
  -ms-transition: all ease 0.3s;
  transition: all ease 0.3s;
    display:table-cell;





}
.social-media-icons:hover {
  background-image: url('../img/facebook-cl.png');
  box-shadow: 0px 0px 4px 1px rgba(0,0,0,0.8);
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform:rotate(360deg);
  -ms-transform:rotate(360deg);
  transform:rotate(360deg);


}

.facebook {
  background-image: url('../img/facebook-bw.png');
}

.facebook:hover {
  background-image: url('../img/facebook-cl.png');
}

.twitter {
  background-image: url('../img/twitter-bw.png');
}

.twitter:hover{

  background-image: url('../img/twitter-cl.png');
}

.linked-in {
  background-image: url('../img/linked-in-bw.png');
}

.linked-in:hover{

  background-image: url('../img/linked-in-cl.png');
}

Here is a jsfiddle

The logos have not been added, however if you hover over them, they are visible.

Any help would be much appreciated!

Thanks


Answers:


You are missing the right way for display:table-cell on the second slide; first remove that property from the title and icons:

.social-media-title {
  /*display:table-cell;   Remove this*/
}
.social-media-icons {
  /*display:table-cell;   Remove this*/
}

Then set the property to their container:

.social-media {
  display:table-cell;   
  vertical-align:middle;
  text-align:center;
}

And customize your Icons and title:

.social-media-title {
  text-align:left;
  padding-left:40px;
}
.social-media-icons {
  display:inline-block;
}

The demo http://jsfiddle.net/b88SW/5/