Question

任何人都知道如何做到这一点？我试图这样做，以便我的按钮内的文字垂直对齐。看起来很傻。对不起，如果代码很乱，我对这一切都很陌生。如果有人可以提供帮助，我会非常感激，花了好几个小时试图做到这一点！

<!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;


}

Answer 1

执行此操作的一种方法是将line-height设置为等于按钮的高度。

＆＃13;

.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;


}

＆＃13;

<a href="#" class="button">Push Me</a>

＆＃13;

Answer 2

您可以使用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>

在div按钮内垂直对齐文本？

2 个答案: