Tengo una cuadrícula de estilo de mampostería como esta:
<div class="masonry">
<div class="brick">
<p>Img Title</p>
<img src="img.jpg">
</div>
<div class="brick">
....
</div>
</div>
Con esta css:
.masonry {
transition: all .5s ease-in-out;
column-gap: 00px;
column-fill: initial;
box-sizing: content-box;
}
.masonry .brick {
text-align: center;
margin-bottom: 0px;
display: inline-block;
vertical-align: top;
}
.masonry .brick p{
color: black;
position: absolute;
transition: all .5s ease-in-out;
}
.masonry .brick img {
max-width: 100%;
vertical-align: middle;
transition: all .5s ease-in-out;
backface-visibility: hidden;
}
¿Cómo centraría la etiqueta p (vertical y horizontal) en el diseño de mampostería con css?
Una vez que cambie el posicionamiento a algo como left = 50%, se dirige a la mitad de la cuadrícula de mampostería, no al único ladrillo de mampostería por alguna razón. Una alineación de texto: el centro no parece funcionar en absoluto.
La idea, por supuesto, es: si pasa el cursor sobre una imagen, muestra el título de la imagen en el medio.
4 respuestas
Use el CSS actualizado a continuación
.masonry {
transition: all .5s ease-in-out;
column-gap: 00px;
column-fill: initial;
box-sizing: content-box;
}
.masonry .brick {
text-align: center;
margin-bottom: 0px;
display: inline-block;
vertical-align: top;
position:relative;
}
.masonry .brick p{
color: black;
position: absolute;
transition: all .5s ease-in-out;
left:50%;
margin:0;
top:50%;
transform:translate(-50%,-50%)
}
.masonry .brick img {
max-width: 100%;
vertical-align: middle;
transition: all .5s ease-in-out;
backface-visibility: hidden;
}
Puede usar position: absolute con left: 50% y top: 50% para centrar el elemento y puede trasladarlo a la mitad de su ancho y alto utilizando transform: translate (-50%, -50%). Para considerar el elemento .brick como el elemento primario para el elemento p absoluto, debe agregar posición: relativa a él.
.masonry .brick {
text-align: center;
margin-bottom: 0px;
display: inline-block;
vertical-align: top;
position:relative;
}
.masonry .brick p{
color: black;
position: absolute;
top:50%;
left:50%;
transform:translate(-50%;-50%;
transition: all .5s ease-in-out;
z-index:10;
}
Los elementos absolutos se colocan en el primer padre relativo, por lo que debe configurar su ladrillo para que sea relativo ... y luego a la izquierda: el 50% funcionará, pero será el 50% desde la izquierda y eso no está centrado ... así que necesita ponerlo de nuevo transformándolo .. intente y vea :)
Puede usar position:absolute
y transform: translate(-50%, -50%);
para el centro horizontal y vertical
.masonry {
transition: all .5s ease-in-out;
column-gap: 00px;
column-fill: initial;
box-sizing: content-box;
position: relative;
width:200px;
}
.masonry .brick {
text-align: center;
margin-bottom: 0px;
display: inline-block;
vertical-align: top;
}
.masonry .brick p{
color: black;
position: absolute;
transition: all .5s ease-in-out;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color:red;
}
.masonry .brick img {
max-width: 100%;
vertical-align: middle;
transition: all .5s ease-in-out;
backface-visibility: hidden;
}
<div class="masonry">
<div class="brick">
<p>Img Title</p>
<img src="http://homepages.cae.wisc.edu/~ece533/images/cat.png">
</div>
<div class="brick">
....
</div>
</div>
Puede intentar eliminar la posición absolute
de la etiqueta p
.
.masonry .brick p{
color: black;
transition: all .5s ease-in-out;
}
Nuevas preguntas
html
HTML (HyperText Markup Language) es el lenguaje de marcado para crear páginas web y otra información que se mostrará en un navegador web. Las preguntas sobre HTML deben incluir un ejemplo mínimo reproducible y una idea de lo que está tratando de lograr. Esta etiqueta rara vez se usa sola y, a menudo, se combina con [CSS] y [javascript].