Question

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

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

有我的css＆amp; HTML

＆＃13;

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

＆＃13;

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

＆＃13;

请帮助我:(：D

Answer 1

也许这可以帮助你，只需将img设置为角色（内联块）并对齐中心。

.logo { 
  width: auto;
  height: auto;
  text-align:center;
}

.logo img {
  display:inline-block;
}

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

希望它有所帮助！

Answer 2

更新（更好的版本）：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

只有100％的宽度永远不会居中，宽度必须为50％

Answer 4

希望这应该符合您的要求。

@media(max-width: 1100px){ .logo { width:auto; height:auto; float:left; margin: 0 auto 0 auto; padding:22.5px 0 0 10px; } .logo img { display: inline-block; } }

Answer 5

文本对齐：中心如果这是您想要居中/文本的唯一元素，那么它将会正常工作。其他oprions将添加到元素。顺便说一句，如果你想要也响应你可以给它宽度：100％;高度：自动;

Answer 6

我的建议基于flexbox。我也将其放入Codepen中，因此您可以使用屏幕尺寸，并查看当屏幕超过1100px屏幕尺寸时塌陷如何发生。

View Codepen

.logo img {
  width: 100px;
  height: auto;
}

@media (max-width: 1100px) {
  .logo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }

  .logo img {
    width: 50%;
    height: auto;
  }
}

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

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

6 个答案: