Flexbox div nicht Zentrierung innerhalb einer anderen div

Ich habe eine div.container innerhalb einer anderen div#zinc.container-fluid. Ich verwendete die übliche flex Box-Methode mit justify-content und align-items Attribute, aber das scheint nicht zu funktionieren ... Ich denke, es ist etwas mit dem position: absolute.Flexbox div nicht Zentrierung innerhalb einer anderen div

Hier alle meine Code:

body { 
 
    font-family: Montserrat, sans-serif; 
 
    font-weight: 200; 
 
} 
 

 
.navbar { 
 
    border-style: none; 
 
    border-radius: 0; 
 
    background-color: transparent; 
 
} 
 
.navbar .navbar-header [type="button"].navbar-toggle { 
 
    border-style: none; 
 
    border-radius: 0; 
 
} 
 
.navbar .navbar-header .navbar-brand { 
 
    color: #C70039; 
 
} 
 
.navbar .navbar-collapse { 
 
    border-style: none; 
 
    border-radius: 0; 
 
} 
 
.navbar .navbar-collapse ul { 
 
    background-color: #FF5733; 
 
} 
 
.navbar .navbar-collapse ul a { 
 
    color: #fff; 
 
} 
 

 
#zinc { 
 
    background-color: blue; 
 
    color: #fff; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
#zinC#subtitle { 
 
    font-size: 24px; 
 
} 
 

 
/*# sourceMappingURL=styles.css.map */

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>Aravind Suresh</title> 
 
    <link rel="stylesheet" 
 
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    <link rel="stylesheet" href="styles.css"> 
 
    </head> 
 
    <body> 
 
    <nav class="navbar navbar-default navbar-fixed-top"> 
 
     <div class="container-fluid"> 
 
     <!-- Brand and toggle get grouped for better mobile display --> 
 
     <div class="navbar-header"> 
 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar-collapse-" aria-expanded="false"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      </button> 
 
      <a class="navbar-brand" href="#">Aravind Suresh</a> 
 
     </div> 
 

 
     <!-- Collect the nav links, forms, and other content for toggling --> 
 
     <div class="collapse navbar-collapse" id="bs-navbar-collapse-"> 
 
      <ul class="nav navbar-nav navbar-right"> 
 
      <li><a href="#zinc">Who Am I?</a></li> 
 
      <li><a href="#">What do I do?</a></li> 
 
      <li><a href="#">What are my likes?</a></li> 
 
      <li><a href="#">Contact me</a></li> 
 
      </ul> 
 
     </div><!-- /.navbar-collapse --> 
 
     </div><!-- /.container-fluid --> 
 
    </nav> 
 
    <div class="container-fluid" id="zinc"> 
 
     <div class="container"> 
 
     <h1>Aravind Suresh</h1> 
 
     <span id="subtitle">I love code.</span> 
 
     </div> 
 
    </div> 
 

 
    <script 
 
\t \t \t src="http://code.jquery.com/jquery-3.1.1.js" 
 
\t \t \t integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" 
 
\t \t \t crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
    </body> 
 
</html>

Wie kann ich Zentrieren des div.container innerhalb des div#zinc?

P.S. Beachten Sie, dass ich Bootstrap 3 in meinem Projekt verwende.

Quelle

2017-01-26 Aravind Suresh

Die Blöcke sind bereits zentriert. Meinst du den Text in den Blöcken zentrieren? Verwende 'text-align: center'. –

Es scheint zentriert zu sein, nicht wahr? –

* Hier ist mein Code: * http://StackOverflow.com/Help/Mcve – connexo

Setzen Sie die width dieser .container von Bootstrap.

#zinc > .container { 
    width: auto; 
}

Quelle

2017-01-26 14:40:16 Stickers

Das funktioniert jetzt. Danke vielmals! –

Die .container ist bereits horizontaly und verticaly zentriert, aber es ist ein Block, so werden die Kinder zu Recht auf den Block ausgerichtet sind. Wenn Sie die Kinder werden auch zentriert wollen, wenn man bedenkt sie alle Texte sind, verwenden Sie einfach text-align: center:

body { 
 
    font-family: Montserrat, sans-serif; 
 
    font-weight: 200; 
 
} 
 
.navbar { 
 
    border-style: none; 
 
    border-radius: 0; 
 
    background-color: transparent; 
 
} 
 
.navbar .navbar-header [type="button"].navbar-toggle { 
 
    border-style: none; 
 
    border-radius: 0; 
 
} 
 
.navbar .navbar-header .navbar-brand { 
 
    color: #C70039; 
 
} 
 
.navbar .navbar-collapse { 
 
    border-style: none; 
 
    border-radius: 0; 
 
} 
 
.navbar .navbar-collapse ul { 
 
    background-color: #FF5733; 
 
} 
 
.navbar .navbar-collapse ul a { 
 
    color: #fff; 
 
} 
 
#zinc { 
 
    background-color: blue; 
 
    color: #fff; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    text-align: center; 
 
} 
 
#zinC#subtitle { 
 
    font-size: 24px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>Aravind Suresh</title> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
    <link rel="stylesheet" href="styles.css"> 
 
</head> 
 

 
<body> 
 
    <nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container-fluid"> 
 
     <!-- Brand and toggle get grouped for better mobile display --> 
 
     <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-navbar-collapse-" aria-expanded="false"> 
 
      <span class="sr-only">Toggle navigation</span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
      <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">Aravind Suresh</a> 
 
     </div> 
 

 
     <!-- Collect the nav links, forms, and other content for toggling --> 
 
     <div class="collapse navbar-collapse" id="bs-navbar-collapse-"> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
      <li><a href="#zinc">Who Am I?</a> 
 
      </li> 
 
      <li><a href="#">What do I do?</a> 
 
      </li> 
 
      <li><a href="#">What are my likes?</a> 
 
      </li> 
 
      <li><a href="#">Contact me</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
     <!-- /.navbar-collapse --> 
 
    </div> 
 
    <!-- /.container-fluid --> 
 
    </nav> 
 
    <div class="container-fluid" id="zinc"> 
 
    <div class="container"> 
 
     <h1>Aravind Suresh</h1> 
 
     <span id="subtitle">I love code.</span> 
 
    </div> 
 
    </div> 
 

 
    <script src="http://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
</body> 
 

 
</html>

Quelle

2017-01-26 14:46:20

Das scheint auch zu funktionieren ... –

Flexbox div nicht Zentrierung innerhalb einer anderen div

Antwort

Verwandte Themen