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>