如何把標誌放在使用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

來源

2017-01-09 GiorgiPera

更新（更好的版本）：

.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"> 
 
\t \t 
 
\t \t <div class="logo"> 
 
      <img src="http://www.gulfstreampark.com/images/default-source/racing-sponsors/pepsi-logo.png?sfvrsn=0" alt="CRED" class="logo"/> 
 
\t \t </div> 
 
    
 

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

來源

2017-01-09 21:39:02 iorgu

不客氣！如果這樣做的話，你可以考慮接受它作爲最好的答案，通過給它一個綠色的複選標記......畢竟這就是爲什麼我在這裏：D – iorgu

也許這可能會幫助你，只需設置img充當字符（內聯塊）和d對齊中心。

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

希望它能幫助！

來源

2017-01-09 20:15:22 ZeroWorks

希望這應該作爲您的需求。

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

來源

2017-01-09 20:26:08

的text-align：如果這是您要居中的是要居中的唯一元素/文中心會工作得很好。其他選擇將添加到元素。順便說一句，如果你想如果也響應你可能會給它的寬度：100％;高度：自動;

來源

2017-01-09 20:37:47

如何把標誌放在使用css的中心

回答

相關問題