网页上有一个“下订单”链接,我想要水平和垂直居中。我设法将它水平居中,但不是垂直居中。我正在使用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指向项目的链接,滚动到页面的最底部。
感谢您的帮助。
答案 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)
请检查一下,我有更新代码。
#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;