1

我目前这样做：

html:

 <div id="narrate">
    <h1>Imagine everything.</h1>
    <span class="preloading">
        <i class="icon-spinner icon-spin icon-2x"></i>
    </span>
</div>

CSS

#narrate {
    margin:0 ;
    padding: 0;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 300px;
    width: 500px;
    margin-top: -50px;
    margin-left: -200px;
    height: 20px;
}

h1 {
    font-size: 3em;
    font-family: 'Source Sans Pro', sans-serif !important;
    font-weight: 700;
}

.preloading {
    height: 20px;
    visibility: hidden;
    text-align: center;
}

我希望 h1 和微调器图标都位于页面中心，微调器图标位于 h1 下方。

上面的代码并没有真正居中，有一些像素输出位置。

我努力了：

#narrate {
    margin:0 ;
    padding: 0;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 300px;
    width: 500px;
    margin-top: -150px;
    margin-left: -250px;
    height: 20px;
}
4

2 回答 2

2

尝试display:table-cell

#narrate {
    margin:0 ;
    padding: 0;
    text-align: center;
      display:table-cell;
    vertical-align:middle; background:grey;
    height: 300px;
    width: 500px;
}

演示

尝试这个

html, body{
    height:100%;
    margin:0;
    padding:0
}
#narrate {
     background:grey;
    height: 100%;
    width: 100%;
   position:relative;
    vertical-align:middle; 
   display:table;
}

h1 {
    font-size: 3em;
    font-family: 'Source Sans Pro', sans-serif !important;
    font-weight: 700; display:table-cell; 
    vertical-align:middle; 
    text-align:center;
}
span{
    display:block;
    font-size:12px
}

演示 2

于 2013-03-01T11:37:39.107 回答
0

如果您正在寻找以 div 为中心的 hor 和 vert 的定位，请使用 margin:auto

#narrate {
    width: 380px;
    height: 280px;
    margin: 70px auto;
    background: #ccc;
    text-align: center;
}

演示 http://jsfiddle.net/X9LfB/6/

编辑：

垂直居中将要求您将身体限制为 500 像素，然后将 margin-top 设置为垂直居中。

于 2013-03-01T11:46:18.557 回答