Хорошо, вот и все:
Я создаю свой первый сайт. Сразу сталкиваюсь с проблемой, которую кажется трудной для преодоления.
Я хочу расположить свое изображение между верхним и нижним колонтитулами, которые будут центрированы по вертикали и горизонтали, независимо от размера экрана.
Я видел примеры использования flexbox , где вы можете центрировать текст и еще много чего в середине целевой области. Похоже, это полезно. Я попробовал это, но возможно я не применил это правильно.
Мой код пока
@import 'https://fonts.googleapis.com/css?family=Alegreya+Sans';
* {
margin: 0;
padding: 0;
border: 0;
}
body {
color: grey;
font-family: 'Alegreya', sans-serif;
margin: 0;
}
img {
max-width: 100%;
height: auto;
width: auto;
}
.banner {
width: 100%;
height: 100%;
display: flex;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
align-items: center;
justify-content: center;
}
.banner-inner {
max-width: 60%;
margin: 0 auto;
}
header {
width: 100%;
height: 80px;
display: block;
}
#header-inner {
max-width: 1200px;
margin: 0 auto;
}
/*--- START NAVIGATION --*/
nav {
float: right;
/* Top, Right, Bottom, Left */
padding: 25px 20px 0 0;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: url(img/nav.png) center;
}
a:hover#menu-icon {
border-radius: 4px 4px 0 0;
}
ul {
list-style-type: none;
}
nav ul li {
font-family: 'Alegreya Sans', sans-serif;
font-size: 150%;
display: inline-block;
float: left;
padding: 10px;
font-weight: bold;
}
nav ul li a {
color: grey;
text-decoration: none;
font-weight: bolder;
}
nav ul li a:hover {
color: lightgrey;
}
.current {
color: black;
}
/* --- MUSIC PAGE --*/
.music-wrapper {
width: 100%;
text-align: center;
}
.album-list figure {
display: inline-block;
margin: 10%;
}
.album-list figcaption {
text-align: center;
font-size: 150%;
font-family: 'Alegreya Sans', sans-serif;
font-weight: bold;
margin: 2%;
}
.album-list a {
text-decoration: none;
}
/* --- SOCIAL AND FOOTER --*/
footer {
width: 100%;
}
.social {
list-style-type: none;
text-align: center;
}
.social li {
display: inline;
}
.social i {
font-size: 200%;
margin: 0.5%;
padding: 0.5% 4% 0.5% 4%;
color: grey;
}
.social i:hover {
color: lightgrey;
}
footer.second {
max-height: 100px;
position: fixed;
bottom: 0px;
z-index: 10;
background: white;
border-top: 1px solid grey;
}
footer.second p {
padding-bottom: 5px;
text-align: center;
color: grey;
font-weight: bold;
}
/*---- MEDIA QUERIES---- */
@media screen and (max-width: 760px) {
header {
position: absolute;
}
#logo {
margin: 15px 0 20px -25px;
background: url(img/SA_mobile.png) no-repeat center;
}
.banner {
padding-top: 150px;
}
#menu-icon {
display: inline-block;
color: #000000;
}
nav ul, nav:active ul {
display: none;
z-index: 1000;
position: absolute;
padding: 20px;
right: 20px;
top: 60px;
border: 2px solid #000000;
border-radius: 5px 0 5px 5px;
width: 50%;
}
nav:hover ul {
display: block;
background: #FFF;
}
nav li {
text-align: center;
width: 100%;
padding: 10px 0;
}
.social i {
font-size: 150%;
padding: 2% 4% 2% 4%;
}
/*--- MUSIC PAGE --*/
.music-wrapper {
padding-top: 25%;
padding-bottom: 25%;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--Content fits mobile screens-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">
<title>SPAZ Attack</title>
</head>
<body>
<header>
<div class="header-inner">
<nav>
<!--- Icon For Moblie Version -->
<a href="#" id="menu-icon"></a>
<ul>
<li><a href="index.html" class="current">Home</a></li>
<!--- Albums/Videos/Audio -->
<li><a href="html/music.html">Music</a></li>
<!--- Calander gig dates/book us -->
<li><a href="html/gigs.html">Gigs</a></li>
<!--- About the band -->
<li><a href="html/bio.html">Bio</a></li>
<!--- Merchandise -->
<li><a href="html/merch.html">Merch</a></li>
<!--- Contact Info -->
<li><a href="html/contact.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<!--- END HEADER -->
<section class="banner">
<div class="banner-inner">
<img src="img/spazAttackLogoSmaller1.png">
</div>
</section>
<!-- END BANNER -->
<!--- END FOOTER -->
<footer class="second">
<div>
<ul class="social">
<li><a href="https://www.facebook.com/spazattackband/" target="blank"><i class="fab fa-facebook"></i></a></li>
<li><a href="https://www.youtube.com/channel/UCXskFjQ_rPbJPzkXUHmrPtA?view_as=subscriber" target="blank"><i class="fab fa-youtube"></i></a></li>
<li><a href="https://spazattack.bandcamp.com/" target="blank"><i class="fab fa-bandcamp"></i></a></li>
<!-- Don't Have YET
<li><a href="#" target="blank"><i class="fa fa-instagram"></i></a></li>
<li><a href="#" target="blank"><i class="fa fa-twitter"></i></a></li>
-->
</ul>
</div>
<p>© SPAZ Attack</p>
</footer>
<!--- END SOCKET -->
</body>
</html>