it-swarm.com.de

Richten Sie div vertikal und horizontal auf das übergeordnete div aus

Ich bin neu in der Webentwicklungsbranche und habe Mühe, ein untergeordnetes Div in einem übergeordneten Div vertikal und horizontal auszurichten. Ich versuche, eine Homepage mit einem Bild in voller Breite und einem Slogan in der Mitte des Bildes zu erstellen. Dies ist mein erster Versuch:

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;

}

Ich bin sicher, dass dies noobischer Code ist, aber ich bin ein Neuling in dieser Branche. Kannst du mir bitte helfen?

Update: Ich habe ein Bild von dem gemacht, was ich vorhabe: enter image description here

3
Jacob T

Es gibt viele Möglichkeiten, wie dies erreicht werden kann. Am nützlichsten finde ich es jedoch, die div-Anzeige in eine Tabellenzelle zu ändern, da Tabellenzellen die vertikale Ausrichtung unterstützen.

Als Anpassung an Ihren Beispielcode ...

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;
}

Beachten Sie das Hinzufügen von display: table zur Klasse .img und das Hinzufügen von display: table-cell und vertical-align: middle zur Klasse .text.

Dies wurde getestet und gespeichert unter https://jsfiddle.net/wLm5zjwx/

2

Probieren Sie CSS Flexbox aus: display: flex; align-items: center;

1
Denis