中心調整圖像時調整大小？

當我按照自己需要調整「標識」的大小時，它不再在頁面中心對齊，現在它在左邊，當我最後添加那兩個.logga時。中心調整圖像時調整大小？

所以這是我的代碼：

body { 
 
    background-image: url(http://i.stack.imgur.com/iOkRy.png); 
 
    background-color: #cccccc; 
 
\t background-repeat: no-repeat; 
 
\t background-size: cover; 
 
} 
 
.logga { 
 
    width: 200px; 
 
    height: 120px; 
 
} 
 

 
.logga img { 
 
    width: 100%; 
 
    height: auto; 
 
}

<!DOCTYPE HTML> 
 
<html> 
 
\t <head> 
 
\t \t <title>Hello</title> 
 
\t \t <meta charset="UTF-8"> 
 
\t \t <link rel="stylesheet" type="text/css" href="style.css"> 
 
\t </head> 
 

 
\t <body> 
 
\t \t <div class="logga" align="center"> 
 
\t \t \t <a href="/start"><img src="http://i.stack.imgur.com/iOkRy.png" alt="Hello"></a> 
 
\t \t </div> 
 
\t </body> 
 

 
</html>

來源

2015-10-06 moseby

-1

試試這個。你會讓你的圖像居中。

body { 
 
    background-image: url("bg2.jpg"); 
 
    background-color: #cccccc; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
} 
 
.logga { 
 
    width: 200px; 
 
    height: 120px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    background-color:white; 
 
} 
 

 
.logga a{ 
 
    display:block; 
 
} 
 
.logga img { 
 
    display:block; 
 
    width: 100%; 
 
    height: auto; 
 
}

<div class="logga"> 
 
      <a href="/start"><img src="http://7-themes.com/data_images/out/62/6983929-fall-nature-photography.jpg" alt="Hello"></a> 
 
     </div>

來源

2015-10-06 15:21:46

非常感謝！我也刪除了背景色，所以它完全透明，但謝謝！現在它可以工作 – moseby

-1

align屬性在HTML5不支持。使用CSS代替，如下所示：

.logga { 
    width: 200px; 
    height: 120px; 
    margin: 0 auto; /* this places .logga in the center of the body */ 
    text-align: center; /* this centers inline elements inside .logga, you don't necessarily need it */ 
}

來源

2015-10-06 15:22:49 Lariza

它與包含div的中心對齊。如果你需要div來居中。父元素需要具有width屬性，然後子元素需要margin-left: auto和margin-right: auto;。

例小提琴這裏：

https://jsfiddle.net/8yhsr5ba/

來源

2015-10-06 15:23:18 Jay

-1

只需使用保證金：汽車;很有型。

來源

2015-10-06 15:24:28

您可以通過爲.logga類指定margin:0 auto;來解決此問題。

.logga{ 
    width: 200px; 
    height: 120px; 
    margin:0 auto; 
}

這可以讓瀏覽器自動計算元素每邊的間距。注意：雖然不推薦使用，但也可以使用<center></center>

<!DOCTYPE HTML> 
<html> 
    <head> 
     <title>Hello</title> 
     <meta charset="UTF-8"> 
     <link rel="stylesheet" type="text/css" href="style.css"> 
    </head> 
    <body> 
     <center> 
      <div class="logga" align="center"> 
       <a href="/start"><img src="logga.png" alt="Hello"></a> 
      </div> 
     </center> 
    </body> 
</html>

來源

2015-10-06 15:44:23 Andrew

中心調整圖像時調整大小？

回答

相關問題