-4
Кто-нибудь знает, как это можно сделать? Я пытаюсь сделать так, чтобы текст внутри моей кнопки был вертикально привязан. Выглядит глупо. Извините, если код грязный, я действительно новичок в этом. Если кто-то может помочь, я бы очень признателен, потратил часы, пытаясь это сделать!текст с вертикальным вводом текста внутри кнопки div?
<!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;
}
Возможный дубликат [Вертикально выравнивание текста в DIV] (http://stackoverflow.com/questions/2939914/vertically-align-text-in- a-div) –