中心在div中垂直链接

Question

网页上有一个“下订单”链接，我想要水平和垂直居中。我设法将它水平居中，但不是垂直居中。我正在使用Twitter Bootstrap。这就是它现在的样子，红色箭头显示了我想要的位置：

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指向项目的链接，滚动到页面的最底部。

感谢您的帮助。

Answer 1

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

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

Answer 2

试试这个。请记住，它适用于IE10 +，并在此行中添加一个特定的类！

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

Answer 3

这是一个解决方案。将此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-->

Answer 4

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;