Question

我正在尝试在2个boostrap列的垂直和水平中间放置一些文本，这些文本要全高且权重相等。结果应该如下图所示。

我试图在主容器内但在列外添加一个容器，但这会使它在两个boostrap列外。我也尝试使用z-index，但是也没有用。

<body>
  <div class="container-fluid">
    <div class="row h-100">
      <div class="col-6 left-side h-100">
        <h2 class='h2-mainpage'><span class="initial"><strong>D</strong></span>IGITAL <span class="initial"><strong>W</strong></span>ORKSHOPS</h2>
      </div>
      <div class="col-6 right-side h-100">
      </div>


    </div>
    <div class="centertext">Elevating Passions through technology</div>
  </div>
</body>

Answer 1

将.centertext移动到.row.h-100内
将.container-fluid > .row设为相对容器
使用.centertext的绝对中心transform

/* Decoration — ignore */
h2 { text-align: center; }

.container-fluid>.row {
  position: relative;
}

.centertext {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  background-color: white;
  padding: 2em 2.5em;
  text-align: center;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row h-100">
    <div class="col-6 left-side h-100">
      <h2>Header</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed delectus inventore nemo. Odit qui in voluptatibus, quasi eius architecto deleniti iusto quidem id blanditiis aspernatur corporis soluta placeat quis voluptates!</p>
    </div>
    <div class="col-6 right-side h-100">
      <h2>Content</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, ab in. Nulla modi explicabo laudantium sequi, nesciunt vero ratione tempore est! Ipsa quas minima aliquam eius, quia iste consequatur sapiente!</p>
    </div>
    <div class="centertext">Elevating Passions through technology</div>
  </div>
</div>

jsFiddle

如何在2个boostrap列的中心放置html元素（div或段落）？

1 个答案: