如何在引导程序中垂直对齐 div 的内容？ [复制]

Posted 2023-03-05

【中文标题】如何在引导程序中垂直对齐 div 的内容？ [复制]

【英文标题】：How to vertically align contents of div in boostrap? [duplicate]

【发布时间】：2017-11-30 00:54:36

【问题描述】：

我有这个：

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

<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>

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

谢谢

【问题讨论】：

你能自定义你用id(#rightHeader)配置的css吗。

你能把输出的图像是什么样子吗？

【参考方案1】：

看看 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>

【讨论】：

文字还在div的顶部

您使用的是哪个浏览器？它甚至可以在 Microsoft Edge 中使用...在我的浏览器中它居中

【参考方案2】：

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

<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>

这和你要找的一样吗？

希望这会有所帮助。

【参考方案3】：

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

#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>