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/

編集：

垂直方向の中央には、体を500pxと制限してから、margin-topを垂直方向の中央に設定する必要があります。

于 2013-03-01T11:46:18.557 に答える