作爲div背景的中心圖像

-2

我需要中心div的幫助，或者只是..頁面中央的背景圖片，作爲響應，在所有設備上都會自動居中。作爲div背景的中心圖像

看網頁：

http://185.91.116.132/new/

我試圖與利潤率左，但它不工作，我想，只是想使用類似的text-align做到這一點：中心;,或我不知道是什麼，我是初學者，試圖創建一個HTML網頁。

我的意思是樹木繁茂的背景標誌圖像，「MELORCRAFT」。（http://185.91.116.132/new/img/logo.png）

來源

2017-07-30 DrWarpMan

包裝你的標誌在一個div，像這樣：

.background { 
 
    position: relative; 
 
    text-align: initial; 
 
} 
 

 
.logo-wrapper { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    text-align: center; 
 
} 
 

 
.logo { 
 
    // Same css 
 
}

<div class="background"> 
 
    <div class="logo-wrapper"> 
 
    <img class="logo" src="logo.png"> 
 
    </div> 
 
    
 
    <!-- other --> 
 
</div>

來源

2017-07-30 18:40:34 alexhenkel

我做到了，但是，如果你能看看發生了什麼。 – DrWarpMan

它沒有工作？ – alexhenkel

看看頁面。 http://185.91.116.132/new/我需要集中它，horizontally邏輯。 – DrWarpMan

<img class="logo" src="img/logo.png"> 

.logo { 
    margin: auto 15% auto 15%; 
    width: 70%; 
}

來源

2017-07-30 18:59:56

也許最好的辦法是使用柔性框。您可以將img（徽標）放入容器中，根據您希望的寬度和高度設置圖像尺寸，然後將其設置爲容器柔性定義，並且應該以所有尺寸爲中心。

<style> 
    .container{ 
width:100%; 
height:500px; 
background-image:url('your-background-image.jpg'); 
background-repeat:no-repeat; 
background-size:cover; 
display:flex; 
justify-content: center; 
align-items: center; 
} 


    img{ 
height:200px; 
width:300px; 
    } 
    </style> 

</head> 
<body> 

<div class="container"> 

     <img src="your-logo.jpg" /> 

</div> 


</body> 
</html>

來源

2017-07-30 19:08:32

作爲div背景的中心圖像

回答

相關問題