Is there any way to align the logo so that they all lie on the same baseline?

Question

Final HTML output that I have a problem with:

.navbar {
  font-family: Cookie, cursive;
  font-size: 40px;
  text-align: center;
  display: block;
}

a:link {
  text-decoration: none;
}

.navbar li {
  display: inline-block;
  padding: 10px;
}

.navbar .cur {
  color: black;
}

<nav>
  <ul class="navbar">
    <li><a href=index.html>Home</a></li>
    <li><a href=photo.html>Photography</a></li>
    <li><a href=blog.html>Blog</a></li>
    <li><a href=work.html>Work With Me</a></li>
    <li><a class="cur" href=about.html>About</a></li>
    <li><img class="log" src="assets/link_logo.png" alt="logo" height="40px"></li>
  </ul>
</nav>

Any suggestions to make the logo appear on the same baseline will be much appreciated.

Did you try `vertical-align:baseline` on the `li`? Without a demo **including the actual image** its hard to assist. — Paulie_D, May 27 '20 at 07:55
Does this answer your question? [CSS vertical alignment of inline/inline-block elements](https://stackoverflow.com/questions/9670469/css-vertical-alignment-of-inline-inline-block-elements) — Sebastian Simon, May 27 '20 at 07:57

score 1 · Answer 1 · edited May 27 '20 at 14:24

1

Make the .navbar a flex container with no-wrap attribute set. This way all the items will be on the same line. If you want to vertically position them in the center - set the align-items: center attr on the flex container

edited May 27 '20 at 14:24

E_net4

27,810
13
101
139

answered May 27 '20 at 07:57

user0101

1,277
1
9
17

By the way, though it solved the problem of aligning the icon. I wanted the whole list to be In the center but after changing it to flex it got aligned to the left! Any ideas on how to change that? – Monish B May 27 '20 at 08:20
Use 'justify-content: center'. Have a read about flexbox feature – user0101 May 27 '20 at 08:20
1

Thanks again! Yeah I'm just starting. Will surely have a look! – Monish B May 27 '20 at 08:25

score 1 · Answer 2 · answered May 27 '20 at 09:09

I think this code can help you!

.navbar {
  font-family: Cookie, cursive;
  font-size: 20px;
  text-align: center;
  display: block;
}

a:link {
  text-decoration: none;
}

.navbar li {
  display: inline-block;
  padding: 10px;
}

.navbar .cur {
  color: black;
}

.mainDiv{
  display: flex;
}

<div class='mainDiv'>
<div class='menuDiv'>
<nav>
  <ul class="navbar">
    <li><a href=index.html>Home</a></li>
    <li><a href=photo.html>Photography</a></li>
    <li><a href=blog.html>Blog</a></li>
    <li><a href=work.html>Work With Me</a></li>
    <li><a class="cur" href=about.html>About</a></li>
  </ul>
</nav>
</div>
<div class='logoDiv'>
  <span> <img src="https://cdn4.iconfinder.com/data/icons/social-media-icons-the-circle-set/48/linkedin_circle-512.png" width="100px" height="100px"></span>
</div>
<div>

Is there any way to align the logo so that they all lie on the same baseline?

2 Answers2