在行内块列中居中段落

Posted 2023-03-05

【中文标题】在行内块列中居中段落

【英文标题】：Centering a paragraph in an inline-block column

【发布时间】：2020-02-11 03:31:42

【问题描述】：

我有一个像这样的砖石风格网格：

  <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% 之类的东西，它就会进入整个砌体网格的一半，而不是由于某种原因而不是一块砌体砖。 text-align: center 似乎根本不起作用。

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

【参考方案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 。

【讨论】：

我不知道你必须在父元素上有 position:relative 。非常感谢！

【参考方案2】：

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

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

【参考方案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>

【参考方案4】：

.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% 并且不是居中的...所以然后你需要通过改造把它放回去..试试看:)