Question

对于某些页面上的标题横幅，我需要创建一个深灰色透明的覆盖层，其中包含文本。虽然我可以在所有页面上创建具有相同高度和宽度的框，但是由于文本内容的变化，我无法在<div>内使文本垂直对齐。

我尝试了垂直对齐，各种位置，并且似乎唯一起作用的是所提供的代码-但是它使文本区域非常狭窄，客户希望它更宽。

.grey-backing {
  background-color: rgba(75, 75, 76, 0.9);
  height: 325px;
  position: relative;
}

.grey-backing-center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<div class="grey-backing">
  <div class="grey-backing-center">
    <h1 style="color: #fff;"><b>HEADING 1</b></h1>
    <hr class="uk-divider-icon uk-width-medium uk-margin-auto">
    <h4 style="color: #fff; margin-top: 15px;">Company is a unique, state-of-the-art platform that visualizes solutions and integrates the best features of strategy design, performance management, social networking and collaboration software capabilities.</h4>
  </div>
</div>

<div class="grey-backing">
  <div class="grey-backing-center">
    <h1 style="color: #fff;"><strong>CASE STUDY</strong></h1>
    <hr class="uk-divider-icon uk-width-medium uk-margin-auto">
    <h3 style="margin-top: 15px; color: #fff;"><b>A GLOBAL PHARMACEUTICAL</b></h3>
  </div>
</div>

框的宽度应为页面宽度的100％，但所需的文本以框的50％而不是框的75％显示。我通常会根据
的不同进行调整。但是，如果文本垂直对齐，将有助于解决问题。

保证金：自动；内容仍然与顶部对齐，而不是垂直对齐。我没有办法使它正常工作。

Answer 1

我认为您可能需要进一步澄清确切的内容。但是，如果您希望文本包装器是页面的某个宽度，则可以专门设置该宽度： .grey-backing-center { width: 75%; }

根据我在示例代码段中看到的内容，文本包装程序似乎在垂直方向上正确对齐。

各种文本内容在div中垂直对齐

1 个答案: