Centre seulement un des deux éléments dans un div?

J'ai une page web simple avec une barre .topnav et une .container avec quelques éléments dedans. J'essaye de centrer juste le .container, pas .topnav, dans le body de la page de sorte qu'il soit verticalement centré. Cependant, quand je l'ai essayé avec un style body:Centre seulement un des deux éléments dans un div?

display:flex; 
align-items:center; 
justify-content:center;

Les deux .topbar et .container sont centrés. Comment puis-je centrer juste le .container verticalement?

body, 
 
html { 
 
    height: 100%; 
 
} 
 

 
.contact_box { 
 
    text-align: center; 
 
    background-color: red; 
 
    border: 1px solid #c0c0c0; 
 
    border-radius: 5px; 
 
    height: 20em; 
 
    width: 25em; 
 
    box-shadow: 1px 1px 6px #757677; 
 
    float: left; 
 
} 
 

 
.contact_box img { 
 
    margin-top: 3.3em; 
 
    margin-bottom: 1.2em; 
 
    height: 3em; 
 
    width: 3em; 
 
} 
 

 
.contact_box h3 { 
 
    color: #6d6d6d; 
 
} 
 

 
#contact .container { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<body id="contact"> 
 
    <div class="topnav" id="myTopnav"> 
 
    <a href="index.html">Home</a> 
 
    <a href="about.html">About</a> 
 
    <a href="#" class="selected">Contact</a> 
 
    <a class="icon" onclick="myFunction()">&#9776;</a> 
 
    </div> 
 

 
    <div class="container"> 
 
    <div class="row" id="contact_section"> 
 
     <div class="contact_box" class="col-md-4"> 
 
     <a href="https://github.com/" target="_blank"><img src="resources/github_logo.png" alt="Github"></a> 
 
     <br> 
 
     <h3>GitHub</h3> 
 
     </div> 
 

 
     <div class="contact_box" class="col-md-4"> 
 
     <a href="https://www.linkedin.com" target="_blank"><img src="resources/linkedin_logo.png" alt="LinkedIn"></a> 
 
     <h3>LinkedIn</h3> 
 
     </div> 
 

 
     <div class="contact_box" class="col-md-4"> 
 
     <img src="resources/email_icon.png" alt="EMAIL"> 
 
     <h3>Email</h3> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

est ici à quoi il ressemble maintenant:

Source

2017-10-20 nezdiro

Puisque vous ne voulez pas de comportement de flexbox sur votre barre de navigation, la solution la plus simple est probablement de ne pas mettre la barre de navigation dans la flexbox. –

Il ne semble pas que la barre de navigation soit dans la flexbox. Seul '.container' est défini sur' display: flex'. Je suis confus. – showdev

Ah, vous avez raison @showdev. Je suis confus aussi - Nezdiro pouvez-vous s'il vous plaît clarifier ce que vous demandez?L'extrait de code que vous avez posté ici ne correspond pas à votre description de ce qui ne va pas ... –

Salut à aligner verticalement au milieu de la page, régler la hauteur du conteneur à 100% de la vue:

#contact .container { 
    height:100vh; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
}

Source

2017-10-20 20:10:13 Federico

J'aime cette réponse! Le seul problème est que maintenant le corps entier est plus grand que la hauteur de la fenêtre d'affichage, de sorte que les boîtes ne semblent centrées que lorsque je descends sous la barre de navigation. La hauteur de la barre de navigation est de 68px et j'ai essayé de placer le dessus de '.container' à' -68px', mais cela ne semble pas affecter quoi que ce soit. – nezdiro

Je pense que je vois ce que vous recherchez:
en-tête en haut de la page et dans le bas, avec le contenu du corps centré verticalement.

Il existe trois systèmes flex dans mon exemple ci-dessous:

Les premiers met en place <body> comme un conteneur souple vertical avec deux éléments: .topnav et .container. Les articles sont justifiés au début du conteneur flexible avec justify-content: flex-start (il s'agit par défaut de toute façon) et .container peut croître pour remplir le conteneur flexible avec flex-grow:1.

Le second paramètre .container en tant que conteneur flexible vertical avec .row en tant qu'élément. Les éléments sont centrés verticalement et horizontalement avec justify-content: center et align-items: center, respectivement.

Le troisième configure les éléments .row en tant que conteneurs flex horizontaux (flex-direction: row est la valeur par défaut), avec .contact_box en tant qu'élément. Les éléments sont centrés horizontalement avec justify-content: center.

html { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    margin: 0; 
 
    min-height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: flex-start; 
 
} 
 

 
.container { 
 
    flex-grow: 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 

 
.row { 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: center; 
 
} 
 

 
.contact_box { 
 
    background-color: red; 
 
    border: 1px solid #c0c0c0; 
 
    border-radius: .5em; 
 
    box-shadow: 1px 1px 6px #757677; 
 
    padding: 1em 2em; 
 
    text-align: center; 
 
} 
 

 
.contact_box h3 { 
 
    margin: .25em 0 0; 
 
}

<div class="topnav"> 
 
    <a href="#">Home</a> 
 
    <a href="#">About</a> 
 
    <a href="#" class="selected">Contact</a> 
 
    <a class="icon">&#9776;</a> 
 
</div> 
 

 
<div class="container"> 
 

 
    <div class="row"> 
 

 
    <div class="contact_box"> 
 
     <a href="https://github.com/" target="_blank"><img src="resources/github_logo.png" alt="Github"></a> 
 
     <br> 
 
     <h3>GitHub</h3> 
 
    </div> 
 

 
    <div class="contact_box"> 
 
     <a href="https://www.linkedin.com" target="_blank"><img src="resources/linkedin_logo.png" alt="LinkedIn"></a> 
 
     <h3>LinkedIn</h3> 
 
    </div> 
 

 
    <div class="contact_box"> 
 
     <img src="resources/email_icon.png" alt="EMAIL"> 
 
     <h3>Email</h3> 
 
    </div> 
 

 
    </div> 
 

 
</div>

Comme cela, avec chaque système flex une couleur différente:

Et si vous avez ajouté une autre .row, il pourrait ressembler à ceci:

Source

2017-10-20 20:24:42 showdev

Centre seulement un des deux éléments dans un div?

Répondre

Questions connexes