CODEWITHSUNDEEP
htmlcss
Sam Lafontaine
Sam Lafontaine

Reputation: 13

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

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!

Upvotes: 0

Views: 957

Answers (4)

Dipen Soni
Dipen Soni

Reputation: 224

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>

Upvotes: 1

Moob
Moob

Reputation: 16184

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>

Upvotes: 1

Mers
Mers

Reputation: 734

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>

Upvotes: 0

Myco Claro
Myco Claro

Reputation: 483

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

Upvotes: 0

Related Questions