web-dev-qa-db-fra.com

Aligner verticalement et horizontalement div en parent div

Je suis nouveau dans le secteur du développement Web et j'ai du mal à aligner verticalement et horizontalement une div enfant dans une div parent. J'essaie de créer une page d'accueil avec une image pleine largeur avec un slogan au centre de cette image. C'est ma première tentative:

HTML:

<div class="img">
   <div class="text">Here is my slogan</div>
</div>

CSS:

.img {
    margin: 0px;
    padding: 0px;
    border-width: 0px;
    background-image: url("picture-1.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% auto;
    background-color: black;
    min-height: 1024px;
}
.text {
text-align: center;
vertical-align: middle;
height: 300px;
padding: 175px;

}

Je suis sûr que c'est du code noobish, mais je suis un nouveau venu dans cette industrie. Pourrais-tu m'aider s'il te plait?

Mise à jour: J'ai fait une photo de ce que j'ai l'intention de: enter image description here

htmlweb-developmentcss
3
Jacob T

Cela peut être réalisé de nombreuses manières, mais celle que je trouve la plus utile est de changer l’affichage div en une cellule de tableau car les cellules de tableau supportent l’alignement vertical.

Comme un ajustement à votre exemple de code ...

HTML

<div class="img">
   <div class="text">Here is my slogan</div>
</div>

CSS

.img {
    margin: 0px;
    padding: 0px;
    border-width: 0px;
    background-image: url("picture-1.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: 100% auto;
    background-color: black;
    min-height: 1024px;
    display: table;
    width: 100%;
}
.text {
    text-align: center;
    height: 300px;
    display: table-cell;
    vertical-align: middle;
}

Notez l'ajout de display: table à la classe .img et l'addition de display: table-cell et vertical-align: middle à la classe .text.

Cela a été testé et enregistré à https://jsfiddle.net/wLm5zjwx/

2
Chris Rutherfurd

Essayez CSS Flexbox: display: flex; align-items: center;

1
Denis