0
301
ViewsAlinear div a la mitad vertical del siguiente elemento
Me gustaría alinear un elemento con el centro vertical del elemento anterior.
En el ejemplo anterior, me gustaría alinear la parte superior del texto con el centro vertical de la imagen al lado.
Por lo tanto, la altura del texto es variable, el margen superior debe estar orientado solo hacia el centro vertical de la imagen.
El problema es que la imagen no tiene una altura fija, de lo contrario solo trabajaría con un margen o relleno. Entonces, mi idea es calcular la altura de la imagen a través de JavaScript, dividirla por dos y luego asignarla como margen al texto.
Lo probé con Flexbox, pero ahí tengo que darle una altura fija al texto:
.container { display: flex; flex-flow: row wrap; max-width: 800px; width: 800px; margin: 0 auto; } .container .image { flex: 0 0 50%; } .container .image img { width: 100%; height: auto; } .container .text { flex: 0 0 50%; display: flex; flex-flow: row wrap; align-items: flex-end; } .container .text .inner { height: 50%; background: #ccc; } <div class="container"> <div class="image"> <img src="http://via.placeholder.com/800x500"> </div> <div class="text"> <div class="inner"> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> </div> </div> </div>Como puede ver, el texto se desborda porque tuve que darle una altura del 50% y esto se basa en la imagen.
3 answers
Answer question0
También puedes hacer esto con CSS Grid. Tenga una cuadrícula de 2x2, donde el elemento de la izquierda abarque las dos filas, y el elemento de la derecha esté autoalineado en la parte superior del cuadrante inferior derecho.
.container { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 0px 0px; } .image { grid-area: 1 / 1 / 3 / 2; } .text { grid-area: 2 / 2 / 3 / 3; } .image { display: grid; place-items: center; } .text { align-self: start; } /* misc */ .image { background: salmon; resize: vertical; overflow: hidden; } .text { background: beige } <div class="container"> <div class="image"><p>This will be centered.</p></div> <div class="text"><p>This will be aligned to the center of the item on the left.</p></div> </div>0
Me gusta usar cuadrículas CSS para este tipo de cosas, pero debe conocer la altura y el ancho de su elemento principal
.my-grid { display: grid; width: 500px; height: 500px; grid-template-areas: "ax" "ab"; } .left { grid-area: a; background-color: #ffa08c; } .right { grid-area: b; background-color: #8ca0ff; } <div class='my-grid'> <div class='left'></div> <div class='right'></div> </div>0
Tal vez con relleno
* { box-sizing: border-box; } .container { display: flex; margin: auto; max-width: 600px; min-height: 300px; border: 1px solid black; } .container div { flex: 1 0 200px; } .left { background-color: rgb(255, 179, 164); display: flex; justify-content: center; align-items: center; } .right { padding: 1em; padding-top: 25%; /* the trick */ } p { margin: 0; /* remove extra space at text top */ } <div class="container"> <div class="left"> <img src="https://via.placeholder.com/150"> </div> <div class="right"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> </div>