中心在div中垂直链接

时间:2015-02-25 15:16:17

标签: html css twitter-bootstrap vertical-alignment

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

enter image description here

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

感谢您的帮助。

4 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:1)

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

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

答案 2 :(得分: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-->

答案 3 :(得分:1)

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

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