CODEWITHSUNDEEP
htmlcss
General Zlatan
General Zlatan

Reputation: 75

How do I vertically align two nav bar items, then an image and then again two nav bar items in CSS?

I want to make the home screen of my website like this:

enter image description here

And I have the following code in HTML:

<body>
 <li class="aboutme"><a href="#">Over Mij</a></li>
 <li class="resume"><a href="#">Resumé</a></li>
 <img class="home_cartoon" src="cartoon.png">
 <li class="portfolio"><a href="#">Portfolio</a></li>
 <li class="contact"><a href="#">Contact</a></li>
</body>

I don't know what I have to do with my CSS to get it like the image I've added, can someone help me?

Upvotes: 0

Views: 162

Answers (4)

Armin Ayari
Armin Ayari

Reputation: 619

You can do this with CSS Grid Layout:

* {
  margin: 0;
  padding: 0;
}

li {
  list-style-type: none;
  list-style-position: inside;
}

body {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-column-gap: 5px;
  height: 100px;
  height: 300px;
  justify-items: center;
}

li, img {
  border: 1px solid black;
}

li {
  align-self: center;
}

img {
  height: 100%;
}
<body>
   <li class="aboutme"><a href="#">Over Mij</a></li>
   <li class="resume"><a href="#">Resumé</a></li>
   <img class="home_cartoon" src="https://torange.biz/photofx/5/8/image-profile-picture-beautiful-exotic-flower-5532.jpg">
   <li class="portfolio"><a href="#">Portfolio</a></li>
   <li class="contact"><a href="#">Contact</a></li>
</body>

Upvotes: 1

MVRCXS
MVRCXS

Reputation: 1

Use flexbox , something like : 

body{
display: flex;
align-items: center;
}

be sure of the size of the container , in this case the body

Upvotes: -2

Johannes
Johannes

Reputation: 67798

First of all you have to use an ul container around li elements and also put the image into an li to get valid HTML. Make all lis inline-blocks and apply vertical-align: middle; to them:

li {
  display: inline-block;
  vertical-align: middle;
}
<body>
  <ul>
    <li class="aboutme"><a href="#">Over Mij</a></li>
    <li class="resume"><a href="#">Resumé</a></li>
    <li><img class="home_cartoon" src="https://placehold.it/120x200"></li>
    <li class="portfolio"><a href="#">Portfolio</a></li>
    <li class="contact"><a href="#">Contact</a></li>
  </ul>
</body>

Upvotes: 3

Deepak Verma
Deepak Verma

Reputation: 617

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
  
}

li {
    float: left;
}

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

li a:hover {
    background-color: #111111;
}
</style>
</head>
<body>


<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="https://placeholder.com"><img src="http://via.placeholder.com/350x150"></a></li>
  <li><a href="#about">About</a></li>
</ul>

</body>
</html>

just insert float:left in li elements and it will do the rest of work for u. please view this in full screen as this example is not responsive to screen sizes

Upvotes: 3

Related Questions