divのコンテンツの垂直方向の整列

これはよくある質問ですが、ここでは明らかに分かりにくいものがあります。私は親のdivの真ん中に縦に整列するようにfontawesomeのアイコンを取得しようとしていますが、それはちょうど一番上に座っています。divのコンテンツの垂直方向の整列

function spinner() { 
 
\t $("#spinner").show(); 
 
}

#spinner { 
 
    display: none; 
 
    height: 100%; 
 
    left: 0px; 
 
    position: absolute; 
 
    text-align: center; 
 
    top: 0px; 
 
    width: 100%; 
 
    z-index: 99999; 
 
} 
 
\t 
 
#spinner div { 
 
    color: yellow; 
 
    border: 10px solid red; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
}

<html> 
 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css"> 
 
    </head> 
 
    <body> 
 
    
 
    <div id="spinner"> 
 
\t  <div> 
 
\t \t  <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i> 
 
\t  </div> 
 
    </div> 
 
    
 
    <button type="button" onclick="spinner()"> 
 
     Spinner 
 
    </button> 
 
    
 
    </body> 
 
</html>

出典

2016-07-18 Daniel Williams

div要素は、プロパティがdisplay:tableに変更する必要があり、その後、子のdivはプロパティdisplay:table-cellを持っている必要がありdisplay:noneを使用して隠されているので。

function spinner() { 
 
    $("#spinner").css("display", "table"); 
 
\t $("#spinner").show(); 
 
}

#spinner { 
 
    display: none; 
 
    height: 100%; 
 
    left: 0px; 
 
    position: absolute; 
 
    text-align: center; 
 
    top: 0px; 
 
    width: 100%; 
 
    z-index: 99999; 
 
} 
 
\t 
 
#spinner div { 
 
    border: 10px solid red; 
 
    color: yellow; 
 
    display: table-cell; 
 
    height: 100%; 
 
    vertical-align: middle; 
 
}

<html> 
 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css"> 
 
    </head> 
 
    <body> 
 
    
 
    <div id="spinner"> 
 
\t  <div> 
 
\t \t  <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i> 
 
\t  </div> 
 
    </div> 
 
    
 
    <button type="button" onclick="spinner()"> 
 
     Spinner 
 
    </button> 
 
    
 
    </body> 
 
</html>

出典

2016-07-19 00:34:07

私は、あなたが実際に垂直方向に整列する方法）あなたの一般的な質問および2）1を説明している、hereを参照してくださいます。要約：垂直方向の配置は、あなたの考え方とは異なり、垂直方向に配置するには他の方法（オンラインで簡単に見つかる）を使用する必要があります。

また、フレンドボックスやハックを既に使用しているので、それを見ることもできます。

出典

2016-07-18 23:59:00 gcoreb

私が知っている2つの一般的な技術があります。

以下の表の方法を使用してください。
要素を表として表示することで、レスポンシブウェブサイトに頭痛を引き起こすことがあります。この場合、transform：translateテクニックを使用できます。
#spinner div {
位置：相対; }
＃スピナー.faスピナー{
位置：絶対; トップ：50％; トランスフォーム：translateY（-50％）; }

function spinner() { 
 
    \t $("#spinner").show(); 
 
    }

#spinner { 
 
     display: none; 
 
     height: 100%; 
 
     left: 0px; 
 
     position: absolute; 
 
     text-align: center; 
 
     top: 0px; 
 
     width: 100%; 
 
     z-index: 99999; 
 
    } 
 
    \t 
 
    #spinner div { 
 
     color: yellow; 
 
     border: 10px solid red; 
 
     height: 100%; 
 
     vertical-align: middle; 
 
     display: table; 
 
     width: 100%; 
 
    } 
 
#spinner .fa-spinner{ 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    }

<html> 
 
     <head> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css"> 
 
     </head> 
 
     <body> 
 
     
 
     <div id="spinner"> 
 
    \t  <div> 
 
    \t \t  <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i> 
 
    \t  </div> 
 
     </div> 
 
     
 
     <button type="button" onclick="spinner()"> 
 
      Spinner 
 
     </button> 
 
     
 
     </body> 
 
    </html>

出典

2016-07-19 00:23:57

divのコンテンツの垂直方向の整列

答えて

関連する問題