Comment faire pour centrer l'image verticalement dans div
J'ai un div qui a une hauteur de 100vh de sorte qu'il est toujours à la hauteur de l'écran du navigateur. À l'intérieur de ce div, je veux mettre une image et centre vertical de son parent.
La hauteur est variable donc je ne peux pas utiliser des marges fixes. Mon langage est comme suit:
HTML
<div class="textportfolio">
<h1>This is a title</h1>
<p class="textbio-small">
The Roosevelt dime is the current ten-cent piece of the United States.
</p>
<img class="portfolio-slides-img" src="https://i.imgur.com/iheO43X.png">
</div>
CSS:
.textportfolio {
font-family: "Lora", serif;
margin: 5%;
background: #e9cca3;
height: 100vh;
}
img.portfolio-slides-img {
max-width: 40%;
max-height: 40%;
margin: 0 auto;
display: block;
}
Quelqu'un sait comment faire pour centrer l'image verticalement selon le navigateur hauteur?
Voici l'extrait de code
CSS:
.textportfolio {
font-family: "Lora", serif;
margin: 5%;
background: #e9cca3;
height: 100vh
}
img.portfolio-slides-img {
margin-top: 15%;
max-width: 40%;
max-height: 40%;
margin: 0 auto;
display: block;
}
HTML:
<div class="textportfolio">
<h1>This is a title</h1>
<p class="textbio-small">
The Roosevelt dime is the current ten-cent piece of the United States.
</p>
<img class="portfolio-slides-img" src="https://i.imgur.com/iheO43X.png">
</div>
- avez-vous essayé position: absolute attribut?
- Ce n'est pas tout à fait clair ce que vous êtes après. L'image est censé être centré et le texte s'asseoir verticalement au-dessus de de l'image centrée ou êtes-vous essayer de centrer l'ensemble du texte/de l'image combo?
- Seulement l'image doit être centrée verticalement à l'intérieur de l' (orange) div.
Vous devez vous connecter pour publier un commentaire.
J'utilise ce bout de code css:
Appliqué à votre échantillon: https://jsfiddle.net/nhdh8ycr/4/
position: relative;
à la place.Centrage des choses dans le CSS a été un long débat où les gens se peser tous les facteurs et valoir ce qui est le moins alambiquée chemin.
Puis, en 2014, quelque chose qui s'appelle Flexbox est sorti et fondamentalement obsolète tout ce qui.
Lorsqu'un conteneur a
display: flex
, il y a les propriétés d'aligner ses enfants. Et vous pouvez l'ancrer dans le milieu sur les deux/les deux axes.https://jsfiddle.net/5goboeey/1/
C'est donc de manière ubiquitaire pratique je pense qu'il continue à voler sous le radar parce que des gens supposent qu'il ne peut pas être si simple.
peut-être que ce stackoverflow question pourrait vous aider
jsfiddle
code est
HTML
CSS
Essayez ceci:
CSS:
HTML: