Tengo un div que es un cuadro cuadrado y lo quiero en el medio, cuanto más texto le pongas seguirá estando en el medio, estoy haciendo mi cuadro cuadrado con JQuery y me gustaría centrarlo con css. aquí está mi código:
<div class="project-item" style="background-color:orange;"> <div class="darkShade"> <p>project.TextContent</p> </div> </div>CSS
.project-item { width: 33%; background-size: cover; color: #FFF; position: relative; .darkShade { padding: 2em; } p { opacity: 0; transition: 0.2s all; } form { display: flex; flex-direction: column; position:relative; div { display: flex; flex-direction: row; width: 100%; } } } .project-item:hover { p { opacity:1; } }JQuery
var cw = $('.project-item').width(); $('.project-item').css({ 'height': cw + 'px' });https://jsfiddle.net/su3h76am/4/
Gracias de antemano Saludos Max
¿Como esto? https://jsfiddle.net/vcts5h8o/
.project-item { width: 33%; background-size: cover; color: #FFF; position: relative; // display: flex; .darkShade { padding: 2em; // margin: auto; width: max-content; } }