垂直对齐div按钮内的文本？
Posted
技术标签:
【中文标题】垂直对齐div按钮内的文本？【英文标题】：vertically allign text inside a div button? 【发布时间】：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的可能重复 【参考方案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;
<a href="#" class="button">Push Me</a>【讨论】：
谢谢大家，我用 line-height 30px 修复了它 :)以上是关于垂直对齐div按钮内的文本？的主要内容，如果未能解决你的问题，请参考以下文章