アライメントセンターが機能していません

div内のテキストを水平方向と垂直方向に整列しようとしていますが、水平方向にのみ整列しています。アライメントセンターが機能していません

#loading > h1 { 
    text-align: center; 
    font-size: 21px; 
    animation: fadeUpIn 3s; 
    -webkit-animation: fadeUpIn 3s; /* Safari and Chrome */ 
} 

@-webkit-keyframes fadeUpIn /* Safari and Chrome */ 
{ 
    from { opacity:0; top:150px; } 
    to { opacity:1; top: 70px; } 
} 
#loading{ 
    position: absolute; top: 0; left: 0; 
    width:100%; 
    height: 100%; 
    background-color: gray; 
    color: white; 
    opacity: 1; 
    transition: 1s; 
    visibility: visible; 
} 
#loading.hidden{ 
    opacity: 0; 
    visibility: hidden; 
}

私のhtmlコード：

<div id="loading"> 
<h1>Creative. Simple.</h1> 
</div>

ウェブサイト全体の

JSフィドル： https://jsfiddle.net/sjyoqdqy/

出典

2017-07-06 Daniel Sushik

[ 'テキストalign'（https://developer.mozilla.org/en- US/docs/Web/CSS/text-align）は、親ブロック内のインラインコンテンツのみを整列させます。ブロックを垂直に中央に配置しません。それはあなたが達成しようとしていることですか？ – showdev

[要素を水平および垂直に配置する方法]の複製がありますか？（https://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically）[CSSのセンターテキスト（水平および垂直）divブロック内]（https://stackoverflow.com/questions/5703552/css-center-text-horizontally-and-vertically-inside-a-div-block） – showdev

はい、しかし私は試してみる動作しません。 –

私は思います私は動作しませんしてみてくださいすべてが... はここに私のCSSコードですこのCSSを#loading > h1に追加することをお勧めします。

#loading > h1 { 
    position: absolute; 
    top: 48%; 
    left: 0; 
    right: 0; 
    margin: 0; 
}

そして一貫してアニメーションの位置を更新します。例えば

@-webkit-keyframes fadeUpIn /* Safari and Chrome */ 
{ 
    from { opacity:0; top:58%; } 
    to { opacity:1; top: 48%; } 
}

フィドル： https://jsfiddle.net/sjyoqdqy/6/

出典

2017-07-06 19:35:06 trevorp

それはうまくいきませんでした。 –

私は上で提供したフィドルで私のために働いているようです。何の問題がまだ見ていますか？ – trevorp

IDは、縦と横の両方にセンタリングされているようです。 –

-1

#loading { 
    ... 
    display: table; 
} 
#loading h1 { 
    ... 
    display: table-cell; 
    vertical-align: middle; 
}

出典

2017-07-06 19:40:46 NIck

アライメントセンターが機能していません

答えて

関連する問題