Den Inhalt eines div vertikal ausrichten

Ich weiß, dass das eine allgemeine Frage ist, aber ich bin sicher, dass ich nur etwas offensichtliches hier vermisse. Ich versuche, das Fontawesome-Icon vertikal in der Mitte des Eltern-Divs auszurichten, aber es bleibt einfach oben sitzen.Den Inhalt eines div vertikal ausrichten

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>

Quelle

2016-07-18 Daniel Williams

Da die div display:none mit versteckt ist die Eigenschaft muss display:table geändert werden und dann sollte das Kind div haben die Eigenschaft display:table-cell.

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>

Quelle

2016-07-19 00:34:07

ich Ihnen here beziehen werden, die 1) Ihre gemeinsame Frage und 2) wie auszurichten tatsächlich vertikal erklärt. Zusammenfassung: vertikale Ausrichtung funktioniert nicht so, wie Sie denken, und Sie müssen andere Methoden verwenden (leicht online zu finden), um vertikal auszurichten.

Sie können auch Flex-Box oder Hacks verwenden, die bereits auf SO veröffentlicht wurden.

Quelle

2016-07-18 23:59:00 gcoreb

Es gibt zwei gebräuchliche Techniken, die ich kenne.

Verwenden Sie die folgende Tabellenmethode.
Wenn Sie Ihr Element manchmal als Tabelle anzeigen lassen, entsteht in der responsiven Website ein Problem. In diesem Fall können Sie die transform: translate-Technik verwenden.
#spinner div {
Position: relativ; }
#spinner .fa-spinner {
Position: absolut; oben: 50%; transform: 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>

Quelle

2016-07-19 00:23:57

Den Inhalt eines div vertikal ausrichten

Antwort

Verwandte Themen