CSS在中间垂直对齐文本/按钮

Question

我正在尝试在中间垂直对齐我的文本/按钮。 但是，我使用了vertical-align: middle; 并且我已经将所有文本/按钮与div嵌套在一起，我不知道为什么它不起作用。

我已经在堆栈论坛上签出了这篇文章的答案，但我遵循了答案，但仍然无法解决。

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

Answer 1

在给出的示例中，您需要将display: table-cell添加到.text-vertical-center 。

Answer 2

为了使其正常工作，您需要对代码进行新的更改。 如果要居中，则需要display: inline-block;它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 &amp; 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>