时间戳

首页 > 解决方案 > 响应式居中 HTML5

html - 响应式居中 HTML5

问题描述

好的，就这样吧：

我正在创建我的第一个网站。立即遇到一个似乎难以克服的问题。

我想将我的图像居中在页眉和页脚之间，无论屏幕大小如何，它都会保持垂直和水平居中。

我已经看到使用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>&copy; SPAZ Attack</p>
	</footer>
<!--- END SOCKET -->
    </body>
    </html>

标签： htmlcssflexboxresponsive

解决方案

签出这个小提琴：https ://jsfiddle.net/8cyjc9qw/

.mid {
  height: 70vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

我使用了其他一些示例来演示它的外观。我已将 vh 用于页眉和页脚，并将剩余高度分配给主要内容部分，并使用 flexbox 使图像居中。希望这可以帮助。

推荐阅读