幻灯片上的垂直和水平居中（使用视差插件）

Question

我的CSS遇到了一些麻烦。基本上，我有一个网站，我使用jquery视差插件使用导航栏从幻灯片滚动到幻灯片。我希望一些内容在多个幻灯片的屏幕上水平和垂直居中，但我无法做到。

第一张幻灯片中只有一些文字，我已经设法将其置于中心位置。我有另一张幻灯片，我在幻灯片顶部（屏幕左侧）有一行文字，中间有3个社交媒体图标（非常大）。以下是幻灯片的线框：

我尝试使用table方法和vertical align，但是当我在图标上方添加文本时，它们都向右移动，文本在两行上。我理解为什么会发生这种情况，但我想不出任何解决方法的方法。

以下是社交媒体幻灯片的HTML：

<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-->

我的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');
}

这是jsfiddle

尚未添加徽标，但如果将鼠标悬停在徽标上，则会显示徽标。

非常感谢任何帮助！

谢谢

Answer 1

在第二张幻灯片上，您错过了display:table-cell的正确方法;首先从标题和图标中删除该属性：

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

然后将属性设置为其容器：

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

并自定义您的图标和标题：

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

演示 http://jsfiddle.net/b88SW/5/