在 div 中垂直居中 link
Center link vertically in a div
网页上有一个"place order" link,我想水平和垂直居中。我设法将它水平居中,但不是垂直居中。我正在使用 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一个link项目,滚动到页面的最底部。
感谢您的帮助。
也许这会有帮助? http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
试试这个。请记住它适用于 IE10+,并向此行添加特定的 class!
.row {
display: flex;
align-items: center;
}
这是一种解决方案。将此 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-->
请检查这个,我有更新代码。
#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-->
网页上有一个"place order" link,我想水平和垂直居中。我设法将它水平居中,但不是垂直居中。我正在使用 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一个link项目,滚动到页面的最底部。
感谢您的帮助。
也许这会有帮助? http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
试试这个。请记住它适用于 IE10+,并向此行添加特定的 class!
.row {
display: flex;
align-items: center;
}
这是一种解决方案。将此 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-->
请检查这个,我有更新代码。
#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-->