将 inline-block 列中的段落居中

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 在 Masonry 布局中将 p 标签（垂直和水平）居中？

一旦我将位置更改为 left=50% 之类的位置，它就会转到整个 Masonry 网格的一半，而不是出于某种原因的一块 Masonry 砖。 text-align: 中心似乎根本不起作用。

当然是这样的想法：如果您将鼠标悬停在一张图片上，它会在中间显示图片的标题。

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

绝对元素定位到第一个相对父元素，因此您需要将积木设置为相对元素....然后 left: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;
}

您可以使用 position:absolute 与 left:50% 和 top:50% 来使元素居中，您可以使用 transform:translate( -50%, -50%).要将 .brick 元素视为绝对 p 元素的父元素，您必须向其添加 position:relative。

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>

Answer 4

您可以尝试从 p 标签中删除位置 absolute。

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

将 inline-block 列中的段落居中

Centering a paragraph in an inline-block column

html

css

text

centering

masonry