html - 当 'top' 值更改时，文本不会留在父 div 中

Question

我有一些图像想显示在我的文本后面，我希望文本在父 div 中居中(水平和垂直居中)，但是每当我将“顶部”值更改为 50% 时，文本会跳转到在其父 div 之外的页面顶部。

我正在使用 Bootstrap。

.row_comm {
        .community-body{
          position: absolute;
          top: 50%;   
        }
        img {
          display: block;
          width: 100%;
        }
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 
 <div class="row row_comm">
      <div class="container">
        <div class="col-lg-4 col-lg-offset-2">
          <img src="https://via.placeholder.com/100x100" class="active">
          <img src="https://via.placeholder.com/100x100" class="inactive">
          <img src="https://via.placeholder.com/100x100" class="inactive">
        </div>
        <div class="community-body">
          <div class="row">
            <div class="col-lg-6 col-lg-offset-4">
              <h1>Join.</h1>
            </div>
          </div>
          <div class="row">
            <div class="col-lg-5 col-lg-offset-7">
              <p class="lead">Some text.</p>
            </div>
          </div>
        </div>
      </div>
    </div>

Answer 1

您需要分配相对于 community-block 父级的位置，因此在这种情况下将 row_com 设置为 position: relative。