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

在我开始之前，我想为我糟糕的英语道歉。

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

有我的 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

原文由 GiorgiPera 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 291

更新（更好的版本）：

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

原文由 orghu 发布，翻译遵循 CC BY-SA 3.0 许可协议

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

你尚未登录，登录后可以

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

Stack Overflow 翻译