如何在响应中将徽标居中 Header
How to Center Logo in Responsive Header
请注意页面缩放：
如您所见，响应式 header 从移动设备到平板电脑尺寸都能完美运行，但在从平板电脑到桌面设备时却无法居中。如何让图片居中显示在图片 5-6 中？我是 12 列网格系统的新手，所以如果您认为这是导致问题的原因，请赐教。谢谢！
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Knights Basketball Academy</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles3.css" type="text/css" rel="stylesheet">
<script type="text/javascript">
var slideimages = new Array(); // create new array to preload images
slideimages[0] = new Image(); // create new instance of image object
slideimages[0].src = "images/slider1.png"; // set image src property
to image path, preloading image in the process
slideimages[1] = new Image();
slideimages[1].src = "images/slider2.png";
slideimages[2] = new Image();
slideimages[2].src = "images/slider3.png";
slideimages[3] = new Image();
slideimages[3].src = "images/slider4.png";
</script>
</head>
<body>
<header>
<div class="row">
<!--first row-->
<div class="col-12" "col-m-12">
<div class="logo">
<a href="index.html">
<img src="images/logo3.png" alt="logo" height="450" width="1130">
</a>
</div>
</div>
</div>
<!--ends first row-->
</header>
<div class="navigation">
<nav>
<ul>
<li><a href="index3.html">Home</a></li>
<li><a href="roster.html">Roster</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Calendar</a></li>
</ul>
</nav>
</div>
<div id="background"><!--background image-->
<div class="row"><!--second row-->
<div style="text-align:center"><!--image slider-->
<img src="images/slider1.png" id="slide" width="713" height="250" />
<script type="text/javascript">
//variable that increments through the images
var step=0;
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.getElementById('slide').src = slideimages[step].src;
if (step<3)
step++;
else
step=0;
//call function "slideit()" every 5 seconds
setTimeout("slideit()",5000);
}
slideit();
</script>
</div>
</div>
<div class="row"><!--third row-->
<div class="col-3 col-m-3">
<img src="images/image5.jpg" alt="Team Photo">
</div>
<div class="col-6 col-m-9" id="background2">
<h1>Welcome</h1>
<p>Knights Basketball Academy is a non-profit
amateur basketball club focused on individual player development
and team concepts. With our elite coaching staff, we are
confident that all players can achieve their own maximum potential
while maintaining excellent character and integrity.
<br>
<br>
Contact us at info@knightsbasketballacademy.com to learn how to become a
Knight today.</p>
</div>
<div class="col-3 col-m-12">
<aside>
<h2>What?</h2>
<p>The KBA is a non-profit amateur basketball club focused on
individual player development and team concepts. </p>
<h2>Where?</h2>
<p>We are located in St. Louis, Missouri. Practices are held at the
Des Peres Lodge.</p>
<h2>How?</h2>
<p>Visit our About page for more contact information.</p>
</aside>
</div>
</div><!--ends third row-->
<footer>
<p>©2016 KNIGHTS BASKETBALL ACADEMY</p>
</footer>
</div><!--ends background-->
</body>
</html>
CSS:
*{box-sizing:border-box;}
.row:after{content:"";
clear:both;
display:block;}
[class*="col-"]{float:left;
padding:10px;}
/*global styles*/
.knights {margin-top:0px}
.logo img {max-width:100%;
height:auto;}
.banner {display: inline-block;
margin-left:auto;
margin-right:auto;}
.navigation {text-align:center;
background-color:#000000;
padding:0px;}
#banner {text-align:center;
margin-bottom: 0px;}
#background {background-image: url("images/background.jpg");}
#background2 {background-color:white;}
a{text-decoration:none;
color:white;}
a:visited {color:white;}
nav{margin:auto;
height:auto;}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
font-family:Arial;}
nav li {
padding: 10px;
margin-bottom: 7px;
background-color :#000000;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
display:block;
margin-left:30px;
margin-right:30px;}
nav li:hover {
background-color: #8E8E8E;}
aside{background-color:#C5202A;
padding:15px;
color:#fff;
text-align:center;
font-size:1.1em;
box-shadow: 0 1px 3px rgba(0,0,0,0.12),
0 1px 2px rgba(0,0,0,0.24);}
footer{background-color:#000000;
color:#fff;
text-align:center;
font-size:0.9em;
padding:15px;}
img{max-width:100%;
height:auto;
}
/*mobile phones first*/
[class*="col-"]{
width:100%;
}
/*tablet*/
@media only screen and (min-width:600px)
{
/*12 column grid*/
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%; text-align:center;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%; background-color:white;margin-top:10px;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
nav {height:auto;}
nav li {display:inline-block;}
}
@media only screen and (min-width:768px)
{
/*12 column grid*/
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%; text-align:center;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%; background-color:white;margin-top:10px;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
nav {height:auto;}
nav li {display:inline-block;
text-align:center;}
}
div.clear { clear:both;}
编辑：徽标的代码可以在 header（第一行）中找到，在 div class "logo"。我已经尝试 "text-align:center" 徽标 class。我不知道还能尝试什么。
EDIT2 拜托，我需要帮助理解的是如何指定桌面大小的样式与平板电脑大小的样式。例如，我可能需要 margin-left: 100px 在桌面上，但在平板电脑或手机上不需要。这就是我感到困惑的地方。
试试这个：
<header>
<center>
<div class="row">
<!--first row-->
<div class="col-12" "col-m-12">
<div class="logo">
<a href="index.html">
<img src="images/logo3.png" alt="logo" height="450" width="1130">
</a>
</div>
</div>
</div>
</center>
<!--ends first row-->
</header>
或许您可以像本例中那样使用翻译。
.center{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
或者您可以使用媒体查询。
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
更新
CSS
.center{
margin-left:50%;
transform: translate(-50%,0);
width: 80%;
}
HTML
<div class="logo">
<a href="index.html">
<img class="center" src="images/logo3.png" alt="logo" height="450" width="1130">
</a>
</div>
请注意页面缩放：
如您所见，响应式 header 从移动设备到平板电脑尺寸都能完美运行，但在从平板电脑到桌面设备时却无法居中。如何让图片居中显示在图片 5-6 中？我是 12 列网格系统的新手，所以如果您认为这是导致问题的原因，请赐教。谢谢！
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Knights Basketball Academy</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles3.css" type="text/css" rel="stylesheet">
<script type="text/javascript">
var slideimages = new Array(); // create new array to preload images
slideimages[0] = new Image(); // create new instance of image object
slideimages[0].src = "images/slider1.png"; // set image src property
to image path, preloading image in the process
slideimages[1] = new Image();
slideimages[1].src = "images/slider2.png";
slideimages[2] = new Image();
slideimages[2].src = "images/slider3.png";
slideimages[3] = new Image();
slideimages[3].src = "images/slider4.png";
</script>
</head>
<body>
<header>
<div class="row">
<!--first row-->
<div class="col-12" "col-m-12">
<div class="logo">
<a href="index.html">
<img src="images/logo3.png" alt="logo" height="450" width="1130">
</a>
</div>
</div>
</div>
<!--ends first row-->
</header>
<div class="navigation">
<nav>
<ul>
<li><a href="index3.html">Home</a></li>
<li><a href="roster.html">Roster</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Calendar</a></li>
</ul>
</nav>
</div>
<div id="background"><!--background image-->
<div class="row"><!--second row-->
<div style="text-align:center"><!--image slider-->
<img src="images/slider1.png" id="slide" width="713" height="250" />
<script type="text/javascript">
//variable that increments through the images
var step=0;
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.getElementById('slide').src = slideimages[step].src;
if (step<3)
step++;
else
step=0;
//call function "slideit()" every 5 seconds
setTimeout("slideit()",5000);
}
slideit();
</script>
</div>
</div>
<div class="row"><!--third row-->
<div class="col-3 col-m-3">
<img src="images/image5.jpg" alt="Team Photo">
</div>
<div class="col-6 col-m-9" id="background2">
<h1>Welcome</h1>
<p>Knights Basketball Academy is a non-profit
amateur basketball club focused on individual player development
and team concepts. With our elite coaching staff, we are
confident that all players can achieve their own maximum potential
while maintaining excellent character and integrity.
<br>
<br>
Contact us at info@knightsbasketballacademy.com to learn how to become a
Knight today.</p>
</div>
<div class="col-3 col-m-12">
<aside>
<h2>What?</h2>
<p>The KBA is a non-profit amateur basketball club focused on
individual player development and team concepts. </p>
<h2>Where?</h2>
<p>We are located in St. Louis, Missouri. Practices are held at the
Des Peres Lodge.</p>
<h2>How?</h2>
<p>Visit our About page for more contact information.</p>
</aside>
</div>
</div><!--ends third row-->
<footer>
<p>©2016 KNIGHTS BASKETBALL ACADEMY</p>
</footer>
</div><!--ends background-->
</body>
</html>
CSS:
*{box-sizing:border-box;}
.row:after{content:"";
clear:both;
display:block;}
[class*="col-"]{float:left;
padding:10px;}
/*global styles*/
.knights {margin-top:0px}
.logo img {max-width:100%;
height:auto;}
.banner {display: inline-block;
margin-left:auto;
margin-right:auto;}
.navigation {text-align:center;
background-color:#000000;
padding:0px;}
#banner {text-align:center;
margin-bottom: 0px;}
#background {background-image: url("images/background.jpg");}
#background2 {background-color:white;}
a{text-decoration:none;
color:white;}
a:visited {color:white;}
nav{margin:auto;
height:auto;}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
font-family:Arial;}
nav li {
padding: 10px;
margin-bottom: 7px;
background-color :#000000;
color: #ffffff;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
display:block;
margin-left:30px;
margin-right:30px;}
nav li:hover {
background-color: #8E8E8E;}
aside{background-color:#C5202A;
padding:15px;
color:#fff;
text-align:center;
font-size:1.1em;
box-shadow: 0 1px 3px rgba(0,0,0,0.12),
0 1px 2px rgba(0,0,0,0.24);}
footer{background-color:#000000;
color:#fff;
text-align:center;
font-size:0.9em;
padding:15px;}
img{max-width:100%;
height:auto;
}
/*mobile phones first*/
[class*="col-"]{
width:100%;
}
/*tablet*/
@media only screen and (min-width:600px)
{
/*12 column grid*/
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%; text-align:center;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%; background-color:white;margin-top:10px;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
nav {height:auto;}
nav li {display:inline-block;}
}
@media only screen and (min-width:768px)
{
/*12 column grid*/
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%; text-align:center;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%; background-color:white;margin-top:10px;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
nav {height:auto;}
nav li {display:inline-block;
text-align:center;}
}
div.clear { clear:both;}
编辑：徽标的代码可以在 header（第一行）中找到，在 div class "logo"。我已经尝试 "text-align:center" 徽标 class。我不知道还能尝试什么。
EDIT2 拜托，我需要帮助理解的是如何指定桌面大小的样式与平板电脑大小的样式。例如，我可能需要 margin-left: 100px 在桌面上，但在平板电脑或手机上不需要。这就是我感到困惑的地方。
试试这个：
<header>
<center>
<div class="row">
<!--first row-->
<div class="col-12" "col-m-12">
<div class="logo">
<a href="index.html">
<img src="images/logo3.png" alt="logo" height="450" width="1130">
</a>
</div>
</div>
</div>
</center>
<!--ends first row-->
</header>
或许您可以像本例中那样使用翻译。
.center{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
或者您可以使用媒体查询。
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
更新
CSS
.center{
margin-left:50%;
transform: translate(-50%,0);
width: 80%;
}
HTML
<div class="logo">
<a href="index.html">
<img class="center" src="images/logo3.png" alt="logo" height="450" width="1130">
</a>
</div>