CODEWITHSUNDEEP
htmlcssnav
Ana G
Ana G

Reputation: 17

Centering navigation images html

I'm wanting to center my images/hyperlinked pictures: https://i.sstatic.net/E051u.png

This is the nav section of my HTML:

body{
  background-color:#163350;
  background-repeat: repeat-x; 
  margin: 0;
}



header {
  background-color:#ded7c2;
  color:white;
  text-align:center;
  padding:5px; 

}
h1{
  font-family:"Courier New", Courier, monospace; 
  font-size:30px;
  color: #ffffff; 
  text-align:center;
} 


h2{
  font-family:"Courier New", Courier, monospace; 
  font-size:30px;
  color:#ffffff; 
  text-align:center;
} 
p{
  font-family:"Trebuchet MS", Helvetica, sans-serif;
  font-size:15px;
  color:white;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;

}

li {
  float: left;

}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}


li a:hover {
  background-color: #111;
}


.active {
  background-color: #4CAF50;
}


section {
  width:400px;
  float:left;
  padding:10px; 
}
footer {
  font-family:"courier new";
  font-size:20px;	
  background-color:#ded7c2;
  color:white;
  clear:both;
  text-align:center;
  padding:5px; 
  width: 100%;
  height:37px;
}
img section{
  float:left;
  text-align:center;
}
img section two{
  float:center;
  text-align:center;
}
img section three
float:right;
text-align:center;
}

.menu {
  width: 100%;
  text-align:center;
}

google{
  display: block;
  margin-left: auto;
  margin-right: auto
    font-family:"Courier New", Courier, monospace; 
  font-size:12px;
  color: #ffffff; 
  text-align:center;
  line-height:30px;
  background-color:#68594c;
  height:690px;
  width:100px;
  float:left;
  padding:0px; 
}


iframe{
  padding: 200px;
}

h3{
  font-family:"Courier New", Courier, monospace; 
  font-size:12px;
  color:#ffffff; 
  text-align:center;
}
<div class= "container">
  <nav>
    <ul>

      <li><a href="home 3.html"><img src="images/home.png" alt="Home" ></a></li> 
      <li><a href="Menu.html"><img src="images/menu.png" alt="Menu"></a></li>
      <li><a href="Events.html"><img src="images/event.png" alt="Blank"></a>


    </ul>
  </nav>
  <section>

Any help would be great. Thank you! :) (it says add more detail but I have nothing to write.....)

Upvotes: 0

Views: 41

Answers (2)

Yash Jain
Yash Jain

Reputation: 1

Make a div element with the ID inside_nav. outside of your ul/li elements. Your code should now look like this.

<nav>
    <div id="inside_nav">
        <ul>
            <li><a href="home 3.html"><img src="images/home.png" alt="Home" ></a></li> 
            <li><a href="Menu.html"><img src="images/menu.png" alt="Menu"></a></li>
            <li><a href="Events.html"><img src="images/event.png" alt="Blank"></a>
        </ul>
    </div>
</nav>

Now, inside of your css, add the margin: auto property to the div element with the ID inside_nav.

#inside_nav {
    margin: auto;
}

Your images/links should now center align.

Upvotes: 1

fernando
fernando

Reputation: 822

remove floating... try this code: https://jsfiddle.net/Lyga3ft2/1/

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  text-align: center;
}

li {
  display:inline-block;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

Upvotes: 1

Related Questions