Anyone know how this can be done? I'm trying to make it so the text inside my button is vertically alligned. Looks silly atm. Sorry if the code is messy I'm really new to all of this. If anyone can help I would greatly appreciate it, spent hours trying to do this!
<!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;
}
