Centrar un párrafo en una columna de bloque en línea

Question

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.

html css text centering masonry

0

etlaM 14 oct. 2019 a las 16:32

Answer 1

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.

1

krish 14 oct. 2019 a las 13:53

Answer 2

.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 :)

1

Every Screamer 14 oct. 2019 a las 13:43

Answer 3

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>

0

Anuresh VP 14 oct. 2019 a las 13:46

Answer 4

Puede intentar eliminar la posición absolute de la etiqueta p.

.masonry .brick p{
  color: black;
  transition: all .5s ease-in-out;
}

0

pavan kumar 14 oct. 2019 a las 13:50

Centrar un párrafo en una columna de bloque en línea

4 respuestas

Nuevas preguntas

html