Alignement vertical dans css responsive

Cette question peut être une réponse et il peut sembler stupide. Je voudrais aligner n'importe quel élément que ce soit un texte, une image ou un div pour aligner verticalement le centre et cela devrait aussi fonctionner dans les écrans réactifs. Je l'ai essayé en ajoutant margin-top avec des pourcentages manuels. Je voudrais savoir s'il existe un moyen simple et efficace de rendre l'alignement vertical réactif. J'ai même fait quelques recherches sur google à ce sujet, certains d'entre eux ont suggéré de changer la propriété d'affichage du conteneur à la table et la cellule div à la table et ensuite utiliser l'alignement vertical comme moyen. Cela semble simple mais cela affecte également les autres éléments de la page que je ne veux pas être en tant que table. Par conséquent, je suis à la recherche de la meilleure option alternative. S'il vous plaît aider. Merci d'avance :)Alignement vertical dans css responsive

.in-middle{ 
 
    width:100%; 
 
    margin-top: 25%; 
 
}

<body> 
 
    <div class="in-middle"> 
 
    <h1>This should be aligned in the center</h1> 
 
    <p>Paragraph which should also be centered</p> 
 
    </div> 
 
</body>

Source

2016-11-10 Harish

Vous pouvez utiliser la solution suivante, en utilisant la propriété tranform:

.in-middle{ 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}

<div class="in-middle"> 
 
    <h1>This should be aligned in the center</h1> 
 
    <p>Paragraph which should also be centered</p> 
 
</div>

Il est recommandé de ne pas utiliser margin-top au lieu de tranform pour centrer verticalement les éléments.

Source

2016-11-10 08:34:01

Cela fonctionne. Je vous remercie. Après avoir vérifié votre code, j'ai pensé que margin-top peut aussi être utilisé à la place de la propriété transform. Est-ce que ça ira? – Harish

Je vois. Merci de me l'avoir dit. – Harish

position: absolute; 
    top: 50%; 
    transform: translateY(-50%);

Ceci va centrer l'élément verticalement.

.in-middle{ 
 
    width:100%; 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translateY(-50%); 
 
}

<body> 
 
    <div class="in-middle"> 
 
    <h1>This should be aligned in the center</h1> 
 
    <p>Paragraph which should also be centered</p> 
 
    </div> 
 
</body>

Source

2016-11-10 08:35:18

Vous devez utiliser CSS3 flexbox. Il va centrer votre contenu verticalement et horizontalement et il ne se chevauchera pas sur le contenu qui le suit.

body { 
 
    margin: 0; 
 
} 
 
.in-middle { 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    align-items: center; 
 
    display: flex; 
 
    height: 100vh; 
 
}

<body> 
 
    <div class="in-middle"> 
 
    <h1>This should be aligned in the center</h1> 
 
    <p>Paragraph which should also be centered</p> 
 
    </div> 
 
    <p>Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet,Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet...</p> 
 
</body>

Source

2016-11-10 08:43:08

Merci. Sera-t-il supporté dans tous les navigateurs? – Harish

@Harish oui, IE10 + et la plupart des autres navigateurs le supportent. –

Merci. Je vais essayer. – Harish

Avec FlexBox:

.in-middle { 
    height: 100%;  
    display: flex; 
    align-items: center; 
} 

<body> 
    <div class="in-middle"> 
     <h1>This should be aligned in the center</h1> 
     <p>Paragraph which should also be centered</p> 
    </div> 
</body>

Source

2016-11-10 08:43:34 Alex

Alignement vertical dans css responsive

Répondre

Questions connexes