HTML中心我的網頁上的對象（導航欄，圖像）

我建立了這個網站，我無法得到navbar或我的圖像在中間。我嘗試了很多方法，比如製作彈性盒，設置邊距，......我找不到問題。我希望這不是一個問題，你看不到圖片等，因爲它看起來很亂。HTML中心我的網頁上的對象（導航欄，圖像）

這裏是我的代碼的一部分：

body { 
 
    background-color: #333333; 
 
} 
 

 
.navBar { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    padding: 10px; 
 
    background-color: #9D9C9C; 
 
    opacity: 0.8; 
 
    width: 95%; 
 
    position: fixed; 
 
    align-items: center; 
 
} 
 

 
.logo { 
 
    width: 200px; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    width: 40%; 
 
    white-space: nowrap; 
 
} 
 

 
a { 
 
    padding-left: 30px; 
 
    padding-right: 30px; 
 
    padding-bottom: 10px; 
 
} 
 

 
.voorPagina { 
 
    width: 95%; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Dia architecten</title> 
 
</head> 
 

 
<body> 
 

 
    <div class="navBar"> 
 
    <img class="logo" src="/Images/LogoDIA.png" /> 
 
    <ul> 
 
     <a href="#Projecten">Projecten</a> 
 
     <a href="#Over">Over</a> 
 
     <a href="#Contact">Contact</a> 
 
    </ul> 
 
    </div> 
 

 
    <img class="voorPagina" src="Images/VPDia.png" /> 
 

 
</body> 
 

 
</html>

謝謝！

來源

2017-09-15 Siebe Dreesen

是這樣的嗎？

您使用justify-content: space-between;爲.navBar類的div，而如果您使用的是justify-content: center;，它會將div的所有子元素居中！此外，我添加了一個佔位符圖像用於檢查目的！

注：請點擊鏈接full page上查看正確的導航欄的中心！

body { 
 
    background-color: #333333; 
 
} 
 

 
.navBar { 
 
    display: flex; 
 
    justify-content: center; 
 
    padding: 10px; 
 
    background-color: #9D9C9C; 
 
    opacity: 0.8; 
 
    width: 95%; 
 
    position: fixed; 
 
    align-items: center; 
 
} 
 

 
.logo { 
 
    width: 200px; 
 
} 
 

 
ul { 
 
    list-style-type: none; 
 
    width: 40%; 
 
    white-space: nowrap; 
 
} 
 

 
a { 
 
    padding-left: 30px; 
 
    padding-right: 30px; 
 
    padding-bottom: 10px; 
 
} 
 

 
.voorPagina { 
 
    width: 95%; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Dia architecten</title> 
 
</head> 
 

 
<body> 
 

 
    <div class="navBar"> 
 
    <img class="logo" src="http://lorempixel.com/100/25/" /> 
 
    <ul> 
 
     <a href="#Projecten">Projecten</a> 
 
     <a href="#Over">Over</a> 
 
     <a href="#Contact">Contact</a> 
 
    </ul> 
 
    </div> 
 

 
    <img class="voorPagina" src="Images/VPDia.png" /> 
 

 
</body> 
 

 
</html>

來源

2017-09-15 20:55:56

HTML中心我的網頁上的對象（導航欄，圖像）

回答

相關問題