相对于父容器居中 h2

Posted 2023-03-06

【中文标题】相对于父容器居中 h2

【英文标题】：Center an h2 with respect to parent container

【发布时间】：2019-12-12 11:37:12

【问题描述】：

我想将 h2 相对于其父容器（圆角矩形）居中，但也希望图像（紫色正方形）垂直填充 div，如下图所示。问题是图像的高度与 h2 块元素的框重叠。到目前为止，这是我使用 flexbox 所做的：

.topic-ex 
  display: flex;
  flex-direction: column;


.topic-ex h2 
  text-align: center;


.topic-ex-info 
  display: flex;

<div class="topic-ex">
  <h2>Text</h2>
  <div class="topic-ex-info">
    <img src="https://placeholder.pics/svg/500" >
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
</div>

【问题讨论】：

您必须更改布局的结构。将图像保存在 1 个 div 中，将文本保存在另一个 div 中，您可以在不重叠的情况下显示 inline-block 它们。

【参考方案1】：

我稍微更改了您的 html 布局，还添加了一些新的 css 规则： Fiddle

对于 h2 居中：我设置父容器 position: relative; 和 h2 position: absolute;。

left: 50%; 将其移动到 x 轴的精确中心，transform: translate(-50%); 将其向后移动一半宽度。

HTML：

<div class="topic-ex">
   <h2>Text</h2>
  <img src="https://placeholder.pics/svg/500" >
  <div class="topic-ex-info">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
</div>

CSS：

.topic-ex 
  display: flex;
  border: 3px solid black;
  border-radius: 30px;
  padding: 10px;
  justify-content: space-between;
  flex-wrap: nowrap;
  align-items: center;
  position: relative;


.topic-ex h2 
  margin: 0;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  top: 0;


.topic-ex img
  width: 150px;
  height: 150px;


.topic-ex-info 
  width: 70%;

如果需要，只需使用值来获得完全相同的外观。

【参考方案2】：

溢出：无；紫色盒子上。您还可以将紫色框的 z-index 添加到 +100 之类的值，这样它就位于边框框的前面，但也不会溢出到文档的其余部分，因为它位于边框框 div 的内部并且有一个属性显示属性为无。