zefrolity zefrolity - 3 months ago 10
CSS Question

How to Center a image with HTML CSS

Before i added

position: fixed;
everything was centered then after i added it it went to the left of the browser can anyone help me with my code if so greatly appreciated.



body {
padding: 0;
margin: 0;
overflow-y: scroll;
font-family: "Raleway",sans-serif;
font-size: 1em;
font-weight: bold;
}

#nav {
background-color: #000f1e;
}

#nav_wrapper {
width: 960px;
margin: 0px 0px 0px 115px;
text-align: left;
}

#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
}

#nav ul li {
display: inline-block;
}

#nav ul li:hover {
background-color: #000f1e;

}

#nav ul li a,visited,hover {
color: white;
display: block;
padding: 20px;
text-decoration: none;
}

#nav ul li a:hover {
color: #626262;
text-decoration: none;
}

#nav ul li:hover ul {
display: block;
}

#nav ul ul {
display: none;
position: absolute;
background-color: #01172c;
border-bottom: solid 2px white;
}

#nav ul ul li {
display: block;
}

#nav ul ul li a,visited {
color: #ccc;
}

#nav ul ul li a:hover {
color: #626262;
}

#spon {
background-color: black;

}

#spon_wrapper {
width: 960px;
margin: 0px 0px 0px 115px;
text-align: left;
}

.logo {
text-align: center;
position: fixed;
}

#nav {
z-index: -1;
}

#nav_wrapper {
z-index: -1;
}

<!DOCTYPE html>
<html>
<head>
<title>DeLuzens</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="logo">
<img src="logo.png" style="height: 125px; width: 100px; text-align: center;">
</div>
<div id="nav">
<div id="nav_wrapper">
<ul>
<li>
<a href="#">Home</a></li>
<li>
<a href="#">Store</a>
<ul>
<li><a href="">Jerseys</a></li>
<li><a href="">Hoodies</a></li>
<li><a href="">Shirts</a></li>
<li><a href="">Headwear</a></li>
<li><a href="">Accessories</a></li>
</ul>
</li>
<li>
<a href="#">Roster</a>
<ul>
<li><a href="">CS:GO</a></li>
<li><a href="">Overwatch</a></li>
<li><a href="">League Of Legends</a></li>
<li><a href="">Dota 2</a></li>
</ul>
</li>
<li>
<a href="#">News</a>
</li>
</ul>
</div>
</div>
</body>
</html>





Thanks everyone trying to help me fix my code :D

Answer

one way to center a position fixed element is to add

left: 0; and right: 0;

so the css would now look like this

.logo {
    text-align: center;
    position: fixed;
    left: 0;
    right: 0;
}
Comments