Question

请在页面缩放时观看：

正如您所看到的，响应式标头在移动设备到平板电脑尺寸方面运行良好，但不会从平板电脑到桌面。如何将图像置于图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>&copy;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;}

编辑：徽标的代码可以在div类“logo”下的标题（第一行）中找到。我已经为徽标类尝试了“text-align：center”。我不知道还有什么可以尝试的。

EDIT2 请，我需要帮助了解如何指定桌面大小的样式与平板电脑大小的样式。例如，我可能需要保留左边：100px在桌面上但不在平板电脑或移动设备中。这就是我很困惑的事情。

Answer 1

也许你可以在这个例子中使用翻译。

    .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>

codepin：http://codepen.io/kmathmann/pen/PZLdBz?editors=1100

Answer 2

试试这个：

<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>

如何在响应式标题中居中徽标

2 个答案: