How to Center a image with HTML CSS


Tags: html,css

Problem :

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



Solution :

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;
}

    CSS Howto..

    How to make hover use border-radius first-child

    JQuery: How to add a CSS class to a HTML button?

    How to make a ghost element in CSS?

    How to vertically center text with CSS?

    How to animate an “:after” using CSS or jQuery

    How to Vertically Center 2 anchor tags with CSS?

    How to make link change the css in the following page [closed]

    How to define multiple CSS attributes in JQuery?

    Capybara how to check if 'li' of a given link has proper css class

    How can I convert an absolute file path to one CSS can use?

    How to make an element have a 'hover' effect (CSS) while hovering another element using jQuery?

    How can I add a hover effect to icons with CSS? [closed]

    How do I center the contents in this div?

    How to expand and collapse three div's side by side?

    how to center text html css

    How to work with gradients in CSS / list of online CSS gradient generators [closed]

    How Can I Make An Odd Shaped Icon into a “Circle”?

    How do you read !important in CSS?

    How not to display / filter out special characters? (CSS or Javascript)

    How to scroll a div inside another div?

    How to create a rounded rectangle shape Css?

    How to resize the width of div left to another which has float:left;?

    background-image: url(“images/plaid.jpg”) no-repeat; wont show up

    How to Make Auto Size Horizontal Line DIV using css?

    How to make a Elastic Vertical Layout?

    How to grow the width of a div as the width screen decreases using Css?

    How do nested vertical margin collapses work?

    How to force input type text within span width

    How to set a css class to an array of tags on mouse hover in Javascript?

    How to Prevent My CSS From Clashing With Facebook's CSS?