个人中心
gpt4 book ai didi

html - 如何在响应式标题中将 Logo 居中

转载 作者：行者123 更新时间：2023-11-28 04:49:40 24 4
gpt4 key购买 nike

<分区>

请注意页面缩放:

picture 1

picure 2

picture 3

picture 4

picture 5

picture 6

如您所见，响应式 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>&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;}

编辑: Logo 的代码可以在标题(第一行)的 div 类“ Logo ”下找到。我已经为 Logo 类尝试了“text-align:center”。我不知道还能尝试什么。

EDIT2 拜托，我需要帮助理解的是如何指定桌面尺寸的样式与平板电脑尺寸的样式。例如，我可能需要 margin-left: 100px 在桌面上，但在平板电脑或手机上不需要。这就是我感到困惑的地方。

24 4 0
文章推荐： c++ - 我可以将具有依赖项的 C++ 库作为 Docker 镜像分发吗？
文章推荐： javascript - 如何用Javascript引用CSS动画？
文章推荐： c++ - 使用 getline 忽略用户输入中的制表符和换行符
文章推荐： javascript - 如何使用ngTagsInput过滤数据
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com