How can I center an image to the right of a navigation bar in html/css?

Question

I'm completely new at coding so I apologize in advance for this question. I'm trying to centrally align an image to the right of a fixed navigation menu.

Here's my code right now:

HTML:

 ul { list-style-type: none; float: left; position: relative; margin: 0; padding: 0; } li { padding: 3px; margin-bottom: 8px; background-color: #33b5e5; color: #ffffff; font-family: "Courier"; } div.image{ display: block; display: inline-block; float: left; } 

  <nav> <ul> <li><a href="sam/index.html">about</a></li> <li><a href="cv/index.html">cv</a></li> <li><a href="adventures/index.html">adventures</a></li> <li><a href="books/index.html">books</a></li> <li><a href="blog/index.html">blog</a></li> <li><a href="quotes/index.html">quotes</a></li> <li><a href="contact/index.html">contact</a></li> </ul> </nav> <div class="image"><img src="vietnam.jpg" alt="" width="450" height="350" /></div> 

I want the navigation menu to be fixed to the left, and the image to be to the right of the navigation menu but at the CENTER of the page. here's an image of what I have right now: current homepage . How can I put the image at the center of the page?

Thanks!

Answer 1

If you are trying the centre the whole lot then your nav and div.image should be inline-block to display them side by side. You should then put the lot in a wrapper which you can centre:

 section {text-align:center} nav, div.image { display: inline-block; vertical-align:middle; } ul { list-style-type: none; position: relative; margin: 0; padding: 0; text-align:left; } li { padding: 3px; margin-bottom: 8px; background-color: #33b5e5; color: #ffffff; font-family: "Courier"; } 

 <section> <nav> <ul> <li><a href="sam/index.html">about</a></li> <li><a href="cv/index.html">cv</a></li> <li><a href="adventures/index.html">adventures</a></li> <li><a href="books/index.html">books</a></li> <li><a href="blog/index.html">blog</a></li> <li><a href="quotes/index.html">quotes</a></li> <li><a href="contact/index.html">contact</a></li> </ul> </nav> <div class="image"><img src="vietnam.jpg" alt="" width="450" height="350" /></div> <section> 

Updated...

Now that I better understand what you are after (nav on left, image centered in remaining space on the right) it seems that flex-box is the simplest solution:

 section { display:flex; justify-content: space-between; align-items: flex-start; } ul { list-style-type: none; margin: 0; padding: 0; text-align:left; } li { padding: 3px; margin-bottom: 8px; background-color: #33b5e5; color: #ffffff; font-family: "Courier"; } 

 <section> <nav> <ul> <li><a href="sam/index.html">about</a></li> <li><a href="cv/index.html">cv</a></li> <li><a href="adventures/index.html">adventures</a></li> <li><a href="books/index.html">books</a></li> <li><a href="blog/index.html">blog</a></li> <li><a href="quotes/index.html">quotes</a></li> <li><a href="contact/index.html">contact</a></li> </ul> </nav> <div class="image"><img src="vietnam.jpg" alt="" width="450" height="350" /></div> <section> 

Attempt 3...

Based on your comments (fyi, you really should try harder to explain your requirements) it sounds like what you want is to centre the image regardless of the nav's position. In the following example I have used margin:auto to centre the .image and position:absolute to fix the nav in the top left. Now the image in centred but the nav may overlap it depending on the viewport width.

 nav {display:block; position:absolute;} ul { list-style-type: none; margin: 0; padding: 0; text-align:left; } li { padding: 3px; margin-bottom: 8px; background-color: #33b5e5; color: #ffffff; font-family: "Courier"; } .image {display:block; width:450px; margin:auto;} 

 <nav> <ul> <li><a href="sam/index.html">about</a></li> <li><a href="cv/index.html">cv</a></li> <li><a href="adventures/index.html">adventures</a></li> <li><a href="books/index.html">books</a></li> <li><a href="blog/index.html">blog</a></li> <li><a href="quotes/index.html">quotes</a></li> <li><a href="contact/index.html">contact</a></li> </ul> </nav> <div class="image"><img src="vietnam.jpg" alt="" width="450" height="350" /></div> 

Answer 2

you can use your div class if class is not work then use id for div like id="image"

 @media All and (max-width: 641px) { ul { list-style-type: none; float: left; position: relative; margin: 0; padding: 0; } li { padding: 3px; margin-bottom: 8px; background-color: #33b5e5; color: #ffffff; font-family: "Courier"; } div.image{ padding-top: 25%; margin-left: 16%; } } @media screen and (min-width: 641px) and (max-width: 800px) { ul { list-style-type: none; float: left; position: relative; margin: 0; padding: 0; } li { padding: 3px; margin-bottom: 8px; background-color: #33b5e5; color: #ffffff; font-family: "Courier"; } div.image{ padding-top: 23%; margin-left: 21%; } } @media screen and (min-width: 801px) and (max-width: 1024px) { ul { list-style-type: none; float: left; position: relative; margin: 0; padding: 0; } li { padding: 3px; margin-bottom: 8px; background-color: #33b5e5; color: #ffffff; font-family: "Courier"; } div.image{ padding-top: 18%; margin-left: 24%; } } @media screen and (min-width: 1025px){ ul { list-style-type: none; float: left; position: relative; margin: 0; padding: 0; } li { padding: 3px; margin-bottom: 8px; background-color: #33b5e5; color: #ffffff; font-family: "Courier"; } div.image{ padding-top: 13%; margin-left: 30%; } } } 

 <nav> <ul> <li><a href="sam/index.html">about</a></li> <li><a href="cv/index.html">cv</a></li> <li><a href="adventures/index.html">adventures</a></li> <li><a href="books/index.html">books</a></li> <li><a href="blog/index.html">blog</a></li> <li><a href="quotes/index.html">quotes</a></li> <li><a href="contact/index.html">contact</a></li> </ul> </nav> <div class="image"><img src="vietnam.jpg" alt="" width="450" height="350" /></div> 

Answer 3

kindly check my codes i'll create for you

.image{
  display: block;
 text-align: center;
}

.image > img{
  background-color: red;
}

You can also check this link for your exact code http://codepen.io/myco27/pen/dNxWWK

Answer 4

You can put the img element into nav and style nav with display:flex, justify-content: space-between See the code snippet

 ul { list-style-type: none; margin: 0; padding: 0; } li { padding: 3px; margin-bottom: 8px; background-color: #33b5e5; color: #ffffff; font-family: "Courier"; } nav { display: flex; justify-content: space-between; } 

 <nav> <ul> <li><a href="sam/index.html">about</a></li> <li><a href="cv/index.html">cv</a></li> <li><a href="adventures/index.html">adventures</a></li> <li><a href="books/index.html">books</a></li> <li><a href="blog/index.html">blog</a></li> <li><a href="quotes/index.html">quotes</a></li> <li><a href="contact/index.html">contact</a></li> </ul> <div class="image"><img src="vietnam.jpg" alt="" width="450" height="350" /></div> </nav>