Question

我有这个：

＆＃13;

#rightHeader {
  height: 450px;
  vertical-align: middle;
  display: inline-block;
}

＆＃13;

<div id="header" class="header">
    <div class="container">
        <div class="row">
            <div id="headerBox" class="col-md-5 text-center">
                <form id="signup" action="" method="post">
                <h1>text</h1>
                <p>text</p>
                <input id="inputField1" class="form-control" placeholder="First Name" type="text" tabindex="1" required>
                <input id="inputField2"  class="form-control" placeholder="Your Email" type="email" tabindex="1" required>
                <input id="inputField2"  class="form-control" placeholder="Password" type="email" tabindex="1" required><br>
                <button class="btn btn-lg btn-primary">Join For Free</button>
                </form>
            </div>
            <div id="rightHeader" class="col-lg-7 text-center">
                <ul>
                    <li>text.</li>
                </ul>
            </div>
        </div>
    </div>
</div>

＆＃13;

对于rightHeader文本，我必须使用margin-top才能使文本可见（否则它太高而不能离开屏幕）。如何在不使用margin-top的情况下垂直中心div中的文本？

由于

Answer 1

＆＃13;

#rightHeader {
  height: 450px;
  vertical-align: middle;
  display: inline-block;
  align-items:center;
  justify-content:center;
  display:flex;
  border:thin black solid;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div id="header" class="header">
    <div class="container">
        <div class="row">
            <div id="headerBox" class="col-md-5 text-center">
                <form id="signup" action="" method="post">
                <h1>text</h1>
                <p>text</p>
                <input id="inputField1" class="form-control" placeholder="First Name" type="text" tabindex="1" required>
                <input id="inputField2"  class="form-control" placeholder="Your Email" type="email" tabindex="1" required>
                <input id="inputField2"  class="form-control" placeholder="Password" type="email" tabindex="1" required><br>
                <button class="btn btn-lg btn-primary">Join For Free</button>
                </form>
            </div>
            <div id="rightHeader" class="col-lg-7 text-center">
                <ul>
                    <li>text.</li>
                </ul>
            </div>
        </div>
    </div>
</div>

＆＃13;

这与您正在寻找的相同吗？

希望这有帮助。

Answer 2

看看CSS3 flexbox。你可以用它做很多事情。应该是这样的：

#rightHeader {
  height: 200px;
  display: flex;
  align-items: center;
  border: 1px solid #666;
}

<div id="rightHeader" class="col-lg-7 text-center">
    <ul>
        <li>text.</li>
    </ul>
</div>

Answer 3

我使用line-height属性，然后在子元素上重置

#rightHeader {
  height: 300px;
  width: 250px;
  line-height: 300px; /* same as div height */
  display: inline-block;
  background: #999;
  text-align: center;
}

#rightHeader ul {
  padding: 1px;
  display: inline-block;
  line-height: normal; /* reset it here */
}

<div id="rightHeader" class="col-lg-7 text-center">
  <ul>
    <li>text.</li>
  </ul>
</div>

如何在boostrap中垂直对齐div的内容？

3 个答案: