如何使用CSS将徽标放在中心

debugcn 发表于 Dev

乔吉·派拉（GiorgiPera）

在开始之前，我要为我的英语不好而道歉。

我想在媒体查询后使用CSS将网站徽标放在中心（最大宽度：1100像素）

有我的CSS和HTML

.logo { 
  width: auto;
  height: auto;
  float:left;
  padding:22.5px 0px 0px 10px;
}

<div class="logo">
  <img src="http://s3.amazonaws.com/libapps/accounts/27060/images/example.png" alt="example" class="logo"/>
</div>

请帮助我:(：D

Iorgu

更新（更好的版本）：

.cd-header {
  position: relative;
  height: 180px;
  background-color: #331d35;
}

@media only screen and (min-width: 1170px) {
 .cd-header {
   height: 180px;
  }
}

.logo { 
  width: auto;
  height: auto;
  float:left;
  padding:22.5px 0px 0px 10px;
}

.banner-1{
  float:right;
  padding:50px 40px;
  width:728px;
  height:90px;
}

@media screen and (max-width: 1100px) {
.logo {
    width: auto;
    height: auto;
    float: none;
    padding: 22.5px 0px 0px 0px; /*to make it exactly to the center*/
}
   .banner-1 {
    display: none;
  }

div.logo{
margin: 0 auto;
width: 250px;
}
}

<html>
<head>

<title>test</title>

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, width=device-width"> 

</head>
<body>

    <header class="cd-header">
		
		<div class="logo">
            <img src="http://www.gulfstreampark.com/images/default-source/racing-sponsors/pepsi-logo.png?sfvrsn=0" alt="CRED" class="logo"/>
		</div>
  

		<div class="banner-1">
			<img src="http://www.picz.ge/img/s2/1701/10/9/94310263d83b.png" alt="Banner Place"/>
		</div>
	
	</header>
  
</body>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。