在 div 中垂直居中链接答案

【问题标题】：Center link vertically in a div在 div 中垂直居中链接
【发布时间】：2015-04-27 15:49:30
【问题描述】：

网页上有一个“下订单”链接，我想将其水平和垂直居中。我设法将它水平居中，但不是垂直居中。我正在使用 Twitter 引导程序。这就是它现在的样子，红色箭头表示我想把它放在哪里：

HTML：

<div class="container">
    <div class="row">
      <div class="col-md-8">
        <h2 class="specs text-center">specs</h2>
        <p class="text-center"> LENGTH - 1760mm<br />
          TIP WIDTH - 136mm<br />
          WAIST WIDTH - 112mm<br />
          TAIL WIDTH - 126mm<br />
          TIP LENGTH - 300mm<br />
          TAIL LENGTH - 200mm<br />
          CAMBER - 4MM<br />
          TURN RADIUS - 23mtrs<br />
        </p>
      </div>
      <!--end col-md-8-->
      <div class="col-md-4 text-center">
        <h2 class="text-center order"><a href="#">place order</a></h2>
      </div>
      <!--end col-md-4--> 
    </div>
    <!--end row--> 
  </div>
  <!--end container-->

CSS：

#products .order
{
    background-color: #392e2e;
    padding: 15px;
    display: inline-block;
    vertical-align: middle;
}

#products .order a
{
    color: #ffffff;
    text-decoration: none;
}

h2.order
{
    display: block;
    text-align: center;
}

还有here's 一个项目的链接，滚动到页面的最底部。

感谢您的帮助。

【问题讨论】：

抱歉关闭它......后来意识到你正在使用 twitter bootstrap 但仍然应该有一些问题来解释这个
试试vertical-align:30%; 或类似的东西。
看看这个问题，可能对stackoverflow.com/questions/22196587/…有帮助
w3.org/Style/Examples/007/center.en.html
stackoverflow.com/questions/20547819/… 的可能副本

标签： html css twitter-bootstrap vertical-alignment

【解决方案1】：

这是一种解决方案。将此 CSS 添加到您的样式表中：

.row-same-height {
    display: table;
    width: 100%;
}
.col-md-height {
    display: table-cell;
    vertical-align:middle;
    float: none !important;
}

现在，这是您应用了新 div 的 html。

<div class="container">
    <div class="row">
      <div class="row-same-height">
        <div class="col-md-8">
          <h2 class="specs text-center">specs</h2>
          <p class="text-center"> LENGTH - 1760mm<br />
            TIP WIDTH - 136mm<br />
            WAIST WIDTH - 112mm<br />
            TAIL WIDTH - 126mm<br />
            TIP LENGTH - 300mm<br />
            TAIL LENGTH - 200mm<br />
            CAMBER - 4MM<br />
            TURN RADIUS - 23mtrs<br />
          </p>
        </div>
        <!--end col-md-8-->
        <div class="col-md-height col-md-4 text-center">
          <h2 class="text-center order"><a href="#">place order</a></h2>
        </div>
        <!--end col-md-4--> 
      </div>
    </div>
    <!--end row--> 
  </div>
  <!--end container-->

【讨论】：

【解决方案2】：

试试这个。请记住，它可以在 IE10+ 上运行，并将特定的类添加到这一行！

.row {
    display: flex;
    align-items: center;
}

【讨论】：

【解决方案3】：

也许这会有所帮助？ http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

.element {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

【讨论】：

【解决方案4】：

请检查一下，我有更新代码。

#products .order
{
    background-color: #392e2e;
    padding: 15px;
    display: inline-block;
    vertical-align: middle;
}
.container{
    .row{
        display: table;
        width: 100%;
        table-layout: fixed;
    }
}
    .col-md-8,.col-md-4{
        display: table-cell;
    width: 60%;
    float: none !important;
    vertical-align: middle;
    }
.col-md-4{width: 40%;}
}

#products .order a
{
    color: #ffffff;
    text-decoration: none;
}

h2.order
{
    display: block;
    text-align: center;
}

<div class="container">
    <div class="row">
      <div class="col-md-8">
        <h2 class="specs text-center">specs</h2>
        <p class="text-center"> LENGTH - 1760mm<br />
          TIP WIDTH - 136mm<br />
          WAIST WIDTH - 112mm<br />
          TAIL WIDTH - 126mm<br />
          TIP LENGTH - 300mm<br />
          TAIL LENGTH - 200mm<br />
          CAMBER - 4MM<br />
          TURN RADIUS - 23mtrs<br />
        </p>
      </div>
      <!--end col-md-8-->
      <div class="col-md-4 text-center">
        <h2 class="text-center order"><a href="#">place order</a></h2>
      </div>
      <!--end col-md-4--> 
    </div>
    <!--end row--> 
  </div>
  <!--end container-->

【讨论】：