我正试图在中间垂直对齐我的文字/按钮。但是,我使用了vertical-align: middle;
并且我使用div
嵌套了所有文本/按钮,我不知道为什么它不起作用。
我已经在堆栈论坛上检查了this帖子的答案,我按照了答案仍然无法做到。
html,
body {
width: 100%;
height: 100%;
}
body {
font-family: Helvetica;
}
.text-vertical-center {
text-align: center;
vertical-align: middle;
color: green;
}
.text-vertical-center h1 {
margin: 0;
padding: 0;
font-size: 4.5em;
font-weight: 700;
color: green;
}
/* Custom Button Styles */
.btn-dark {
border-radius: 0;
color: #fff;
background-color: rgba(0,0,0,0.4);
}
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
color: #fff;
background-color: rgba(0,0,0,0.7);
}
hr.small {
max-width: 100px;
}
/* Side Menu */
.header {
display: table;
position: relative;
width: 100%;
height: 100%;
background: url(../img/bg.jpg) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header id="top" class="header">
<div class="text-vertical-center">
<h1 =class"main1">Start Bootstrap</h1>
<h3 =class"main2">Free Bootstrap Themes & Templates</h3>
<br>
<a href="#about" class="btn btn-dark btn-lg">Find Out More</a>
<a href="#about" class="btn btn-dark btn-lg">Find Out More</a>
<a href="#about" class="btn btn-dark btn-lg">Find Out More</a>
</div>
</header>
答案 0 :(得分:2)
在给出的示例中,您需要将display: table-cell
添加到.text-vertical-center
。
答案 1 :(得分:0)
为了使其工作,您需要对代码进行新的更改。
如果你想让它居中,你需要它display: inline-block;
,并有一个垂直对齐的兄弟。
我能想到的最佳方法如下:
html,
body {
width: 100%;
height: 100%;
}
body {
font-family: Helvetica;
}
.text-vertical-center {
text-align: center;
vertical-align: middle;
color: green;
display: inline-block;
}
.text-vertical-center h1 {
margin: 0;
padding: 0;
font-size: 4.5em;
font-weight: 700;
color: green;
}
/* Custom Button Styles */
.btn-dark {
border-radius: 0;
color: #fff;
background-color: rgba(0,0,0,0.4);
}
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
color: #fff;
background-color: rgba(0,0,0,0.7);
}
hr.small {
max-width: 100px;
}
/* Side Menu */
.header {
display: table;
position: relative;
width: 100%;
height: 100%;
background: url(../img/bg.jpg) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.header:before {
content: "";
vertical-align: middle;
height: 100%;
display: inline-block;
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header id="top" class="header">
<div class="text-vertical-center">
<h1 =class"main1">Start Bootstrap</h1>
<h3 =class"main2">Free Bootstrap Themes & Templates</h3>
<br>
<a href="#about" class="btn btn-dark btn-lg">Find Out More</a>
<a href="#about" class="btn btn-dark btn-lg">Find Out More</a>
<a href="#about" class="btn btn-dark btn-lg">Find Out More</a>
</div>
</header>