Центральная ссылка по вертикали в 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

Вот одно из решений. Добавьте этот CSS в таблицу стилей:

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

Теперь, вот ваш html с применяемыми новыми div.

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

Возможно, это поможет? http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

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

Answer 3

Попробуйте это. Имейте в виду, что он работает на IE10 + и добавляет определенный класс в эту строку!

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