How do I put a div in the middle of two elements inside another div?

Question

How do I put a div in the middle of two elements inside another div?

Navigation

#1 by (0 votes)

0

Galera,

How do I put a text from a div in the middle of another div that has two separate photos.

<div>
<img>
<img>
</div>

<div>
<p></p>
<div>

In yellow and green are the divs

Ineedtobelikethisimage

Note: I can not change the order of the html, placing the text before, or inside the div along with the photos.

I tried to move the photo 2 with top margins to the bottom, and then upload the text with negative margin top, but everything was out of place, because the images and text are huge.

html css

asked by anonymous 17.05.2018 / 21:49

1 answer

Unexpected behaviors with basic operations in JavaScript [duplicate] Doubt when creating structs, relating one struct to another

score 0 · Accepted Answer

I'm going to give you an example, but what's the chance of it working on your project? Almost none, because there's a lot of stuff out there that can buggy the layout, even because of% p>

Notice that first positions:absolut needs pai , then the div of images needs position:relative and text as well. Notice that the second image has a position:absolut referring to the height of the text that you will have to put in hand in px, it can not be dynamic at that time, but you may not even need what I saw on the site. Now the text that has margin-top of 500px, referring to the height of the first image that tb is 500px in height. Tb I had to margin-top in the images to be one underneath the other. You've already seen that it is a gambiarra of the car né ...

See the example. everything is in CSS, and your HTML structure remains intact.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.pai {
    position: relative;
}
.texto {
    margin-top: 500px;
    position: absolute;
}
.imgs{
    position: absolute;
}
.imgs img{
    display: block;
}
.mt {
    margin-top: 200px;
}

<div class="pai">

    <div class="imgs">
        <img src="http://placecage.com/500/500"alt="">
        <img class="mt" src="http://unsplash.it/500/500"alt="">
    </div>
    
    <div class="texto">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam amet architecto ipsam ducimus debitis minus eum quaerat ratione expedita nulla odit, accusamus magni nesciunt eligendi id dolore libero porro vero, laboriosam eius eveniet repellat? Voluptas explicabo dolor quod deserunt soluta debitis facilis tempora recusandae sunt voluptate quisquam dolorem suscipit accusantium ipsum placeat voluptates, quis, optio ab maiores dicta aperiam labore nemo doloremque similique! Recusandae doloremque, aut beatae quam maiores quia? Quis repellendus inventore facere corporis deserunt. Nobis ipsum a quisquam? Mollitia, autem. Sequi facilis recusandae quo sunt voluptates consectetur, obcaecati aliquid minima nemo, nihil iusto magnam assumenda nulla? Veniam, est?</p>
    <div>

</div>