Question

我试图将父帖div中的帖子标题，Byline和评论垂直居中。

我所做的一切只是在水平线或中心之间留出太多空间。感谢任何指导。

＆＃13;

<div class="container main">
  <div class="row">
    <div class="col-xs-12 col-sm-7">
      <div id="latest" class="img-responsive">
        <div class="SeeMore">
          <p class="play">
            See More
          </p>
        </div>
      </div>
    </div>

    <div class="outer">
      <div class="inner">
        <div class="col-xs-12 col-sm-5">
          <h3 class="latest-title"> post title </h3>
        </div>

        <div class="col-xs-12 col-sm-5">
          <h6 class="byline"> Author: Sheila Date:</h6>
        </div>

        <div class="col-xs-12 col-sm-5 comments">
          <span class="glyphicon glyphicon-user"></span>
        </div>
      </div>

    </div>
  </div>
</div>

＆＃13;

Answer 1

您可以使用 flex

.inner {
  text-align: center;
}
.outer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 500px;
}

Answer 2

这将是一个快速修复，用于垂直对齐并位于您提供的代码的中心

<div class="container main" style="text-align: center;">
      <div class="row" style="position: absolute; left: 50%; text-align: left;">
        <div class="col-xs-12 col-sm-7">
          <div id="latest" class="img-responsive">
            <div class="SeeMore">
              <p class="play">
                See More
              </p>
            </div>
          </div>
        </div>

        <div class="outer" style="text-align: left;">
          <div class="inner">
            <div class="col-xs-12 col-sm-5">
              <h3 class="latest-title"> post title </h3>
            </div>

            <div class="col-xs-12 col-sm-5">
              <h6 class="byline"> Author: Sheila Date:</h6>
            </div>

            <div class="col-xs-12 col-sm-5 comments">
              <span class="glyphicon glyphicon-user"></span>
            </div>
          </div>

        </div>
      </div>
    </div>

在div中垂直居中div

2 个答案: