Wie zentriere ich vertikal ein div in einem div, dessen Höhe aufgrund eines img darin liegt?

Question

Ich habe dieses unvollendeten Beispiel Codeblock:

<div style="position: relative; width: 100%; float:left;"> 
    <img style="max-width:1920px; width:100%; display:block;position:relative; float: left;"> 
    <div width:400px; ><p>Text and more Text<p></div> 
</div> 

ich den Text div wollen immer in der vertikalen Mitte des Bildes/Eltern div zu sein, und dass es eine margin-right von 10%; hat wie da die Höhe Bild ändert aufgrund der Fenstergröße möchte ich das Textfeld immer in der vertikalen Mitte des Bildes sein.

Answer 1

Verwenden Sie CSS Positionierung, und wenden Sie position: absolute an.

Werfen Sie einen Blick auf das Snippet unten:

.box-holder { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
p { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    margin: 0; 
 
    text-align: center; 
 
    background: rgba(255, 255, 255, 0.5); 
 
}

<div class="box-holder"> 
 
    <img src="http://placehold.it/200x200" /> 
 
    <p>Text and more Text</p> 
 
</div>

hoffe, das hilft!

Answer 2

Sie könnten dies mit position tun.

img { 
 
    width: 100%; 
 
} 
 

 
.wrapper { 
 
    position: relative; 
 
} 
 

 
p { 
 
    background: rgba(0, 0, 0, 0.3); 
 
    padding: 20px 0; 
 
    text-align: center; 
 
    color: #eee; 
 
    text-transform: capitalize; 
 
    font-family: sans-serif; 
 
    font-style: 18px; 
 
} 
 

 
.pictureCaption { 
 
    position: absolute; 
 
    display: block; 
 
    width: 100%; 
 
    top: calc(50% - 38px); 
 
}

<div class="wrapper"> 
 
    <img src="https://images.unsplash.com/photo-1462834026679-7c03bf571a67?dpr=1&auto=compress,format&fit=crop&w=1199&h=791&q=80&cs=tinysrgb&crop="> 
 
    <p class="pictureCaption">This is some text about this picture.</p> 
 
</div>