将段落置于行内块列的中心

Question

我得到了这样的砖石样式网格：

  <div class="masonry">
      <div class="brick">
         <p>Img Title</p>
         <img src="img.jpg">
      </div>
      <div class="brick"> 
       ....
      </div>
  </div>

使用此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;
}

我如何使用css将p标签（垂直和水平）在Masonry布局中居中？

一旦我将位置更改为left = 50％的位置，它就会到达wohle Masonry网格的一半，由于某种原因而不是一块砖石。文本对齐：居中似乎根本不起作用。

当然是：如果将鼠标悬停在一张图像上，它将在中间显示图像的标题。

Answer 1

.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;
 }

绝对元素位于第一个相对父对象的位置，因此您需要将砖块设置为相对亲...。然后向左：50％可以工作，但从左开始为50％，并且不居中...因此您需要通过转换将其放回去..尝试看看:)

Answer 2

使用下面更新的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;
  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;
}

Answer 3

可以将position:absolute和transform: translate(-50%, -50%);用于水平和垂直中心

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