垂直对齐div按钮内的文本？答案

【问题标题】：vertically allign text inside a div button?垂直对齐div按钮内的文本？
【发布时间】：2017-06-29 10:23:21
【问题描述】：

任何人都知道如何做到这一点？我正在尝试使按钮内的文本垂直对齐。看起来很傻atm。抱歉，如果代码很乱，我对这一切都很陌生。如果有人可以提供帮助，我将不胜感激，我花了几个小时尝试这样做！

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>I'M JACOB</title>
        <meta name="description" content="I'm Jacob">
        <link rel="stylesheet" href="main.css">
        <link href="https://fonts.googleapis.com/css?family=Amatic+SC|Lobster" rel="stylesheet">
    </head>
    <body>
    <nav class="fixed-nav-bar">
  <ul>
  <li><a href="default.asp">Home</a></li>
  <li><a href="news.asp">About</a></li>
  <li><a href="contact.asp">Portfolio</a></li>
  <li><a href="about.asp">Contact</a></li>
</ul>
</nav>

<div class="box"><h1>Hello World!</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dui urna, pellentesque sed consectetur nec, maximus placerat mauris. Donec ultrices elementum augue, et rutrum est elementum sed. Duis sit amet varius eros. Sed nunc velit, congue a bibendum ac, cursus eget velit. Maecenas bibendum eleifend arcu. Morbi at neque at ex interdum tempus. In vitae mauris urna. Integer sit amet suscipit libero. Cras ultricies tincidunt commodo. Nam vel leo rhoncus, facilisis orci a, tempus nisi. Suspendisse porta est nunc, ut malesuada quam ultrices vitae. Aliquam diam ligula, auctor a elementum sit amet, convallis et nibh. In hac habitasse platea dictumst. Mauris semper vel ipsum eget convallis.</p></div><br>
<a href="#" class="button">Push Me</a>

    <div class="footer">Coded from scratch by Jacob in HTML & CSS.<br>All rights reserved ©</div>

    </body>

CSS

.fixed-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 50px;
  background-color: #FF8E8E;
  box-shadow: 0px 2px 0px #FFC8C8;
}

li {
    float: left;
    list-style: none;

}

li a {
    display: block;
    color: white;
    font-family: sans-serif;
    font-size: 14px;
    text-align: center;
    padding: 0px 16px;
    text-decoration: none;
}

.box {
  position: absolute;
  width: 800px;
  height: 400px;
  z-index: 15;
  top: 30%;
  left: 50%;
  margin: -100px 0 0 -400px;
  background: transparent;
    text-align: center;
    font-family: sans-serif;
    font-size: 14px;
    color: darkgray
}


.footer {
  position: absolute;
    height: 25px;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
    font-family: sans-serif;
    font-size: 13px;
    color: darkgrey

}

.button {
    display: block;
    margin:0 auto;
    width: 150px;
    height: 50px;
    margin-top: 20%;
    border: 1px solid;
    border-color: darkturquoise;
    border-radius: 5px;
    text-align: center;
    line-height: 22px;
    font-size: 16px;
    font-family: sans-serif;
    background-color: darkturquoise;
    color: white;


}

【问题讨论】：

Vertically align text in a div的可能重复

标签： css vertical-alignment

【解决方案1】：

您可以使用display: flex; justify-content: center; align-item: center; 将某些内容垂直和水平居中。这是一个很好的参考https://www.w3.org/Style/Examples/007/center.en.html

.fixed-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 50px;
  background-color: #FF8E8E;
  box-shadow: 0px 2px 0px #FFC8C8;
}

li {
  float: left;
  list-style: none;
}

li a {
  display: block;
  color: white;
  font-family: sans-serif;
  font-size: 14px;
  text-align: center;
  padding: 0px 16px;
  text-decoration: none;
}

.box {
  position: absolute;
  width: 800px;
  height: 400px;
  z-index: 15;
  top: 30%;
  left: 50%;
  margin: -100px 0 0 -400px;
  background: transparent;
  text-align: center;
  font-family: sans-serif;
  font-size: 14px;
  color: darkgray
}

.footer {
  position: absolute;
  height: 25px;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
  font-family: sans-serif;
  font-size: 13px;
  color: darkgrey
}

.button {
  display: block;
  margin: 0 auto;
  width: 150px;
  height: 50px;
  margin-top: 20%;
  border: 1px solid;
  border-color: darkturquoise;
  border-radius: 5px;
  text-align: center;
  line-height: 22px;
  font-size: 16px;
  font-family: sans-serif;
  background-color: darkturquoise;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

<nav class="fixed-nav-bar">
  <ul>
    <li><a href="default.asp">Home</a></li>
    <li><a href="news.asp">About</a></li>
    <li><a href="contact.asp">Portfolio</a></li>
    <li><a href="about.asp">Contact</a></li>
  </ul>
</nav>

<div class="box">
  <h1>Hello World!</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dui urna, pellentesque sed consectetur nec, maximus placerat mauris. Donec ultrices elementum augue, et rutrum est elementum sed. Duis sit amet varius eros. Sed nunc velit, congue a bibendum
    ac, cursus eget velit. Maecenas bibendum eleifend arcu. Morbi at neque at ex interdum tempus. In vitae mauris urna. Integer sit amet suscipit libero. Cras ultricies tincidunt commodo. Nam vel leo rhoncus, facilisis orci a, tempus nisi. Suspendisse
    porta est nunc, ut malesuada quam ultrices vitae. Aliquam diam ligula, auctor a elementum sit amet, convallis et nibh. In hac habitasse platea dictumst. Mauris semper vel ipsum eget convallis.</p>
</div><br>
<a href="#" class="button">Push Me</a>

<div class="footer">Coded from scratch by Jacob in HTML & CSS.<br>All rights reserved ©</div>

【讨论】：

如果你不赞成我，这个答案有什么不正确的地方？我很想得到反馈，这样我就可以从错误中吸取教训。
这里有些人在开玩笑。你的回答完全正确。

【解决方案2】：

一种方法是设置line-height 等于按钮的高度。

.button {
    display: block;
    margin:0 auto;
    width: 150px;
    height: 50px;
    line-height: 50px;
    margin-top: 20%;
    border: 1px solid;
    border-color: darkturquoise;
    border-radius: 5px;
    text-align: center;
    font-size: 16px;
    font-family: sans-serif;
    background-color: darkturquoise;
    color: white;


}

&lt;a href="#" class="button"&gt;Push Me&lt;/a&gt;

【讨论】：

谢谢大家，我用 line-height 30px 修复了它 :)