2017-07-30 183 views
-2

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

看網頁:

http://185.91.116.132/new/

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

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

回答

0

包裝你的標誌在一個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>

+0

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

+0

它沒有工作? – alexhenkel

+0

看看頁面。 http://185.91.116.132/new/我需要集中它,horizo​​ntally邏輯。 – DrWarpMan

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

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

也許最好的辦法是使用柔性框。您可以將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>