使段落在内嵌块列中居中

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 标签(垂直和水平(？

一旦我将位置更改为 left=50%，它就会进入整个砌体网格的一半，而不是出于某种原因的一块砌体砖。文本对齐：中心似乎根本不起作用。

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

Answer 1

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

绝对元素定位到第一个相对父元素，因此您需要将砖块设置为相对元素。然后左：50% 会起作用，但它会从左边开始 50%，而且不是居中......所以你需要通过转换它来把它放回去。试试看:)

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