水平li-垂直对齐元素

Question

I'm using a <ul> with css display: inline; set to use as a toolbar/menu at the top of my page like this:

As you can see, the text vertically aligns perfectly, however the img on the left is too high, and the input box on the right is slightly low. I'm struggling to move them so they are perfectly vertically aligned.

Below is my CSS:

.mynav {
    font-weight: 300;
    border: 1px solid #ccc;
    border-width: 1px 0;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: #0067b1;
}

.mynav li {
    display: inline;
      align-items: center;
        vertical-align:middle;
  line-height:35px;
}

.mynav a {
    color: white;
    display: inline-block;
    padding: 15px;
    font-size: 14pt;
    text-decoration: none;
}

.mynav input {
    margin-left: 25px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-style: italic;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: none;
    padding: 5px;
    width: 200px;
    height: 25px;
    margin-top: 0px;
}

.mynav i
{
    font-weight: 300;
    color: white;
    font-size: 24px;
    margin-left: 15px;
}

And my HTML (if needed):

<ul class="mynav">
    <li><img src="http://www.advancegroupholdings.com.au/my_logo_nav.png" style="width: 100px; height:25px; padding-right:25px;" /></li>
    <li><a href="/">My Jobs</a></li>
    <li><a href="/about/">Obtain a Quote</a></li>
    <li><a href="/work/">Submit New Instruction</a></li>
    <li><a href="/clients/">Settings</a></li>
    <li><a href="/contact/">Help</a></li>
    <li><input type="text" placeholder="Enter Your Ref or Job Number"/><i class="fa fa-search"></i></li>
</ul>

As for the input box, it has a padding of 5 which I have tried to remove with no luck. I have also set margin-top: 0px on the input, still no luck.

As for the logo, I'm also quite stumped. I've tried adding margin-top: 5px , but it's not working.

I also have found both these questions on StackOverflow:

<ul> horizontal nav bar... vertically-align element

css - verticaly align horizontal li

The first had no effect and the second wanted to change the CSS to display: flex , which for me gets rid of the horizontal bar, doesn't it?

Can anyone help me get the logo and the input box (and the magnifying glass) vertically centered? Thank you in advance!

Plunker here

Answer 1

Adding next two rules to your image will center it correctly.

display: inline-block;
vertical-align: sub; /* or text-bottom */

As for the input , it looks correctly centered to me.

Answer 2

I created a small bootstrap example for what you require. Different to what you have but give the required output more or less. Hopefully you can continue from here if this solution works for you.

HTML

  <div class="col-md-2"><img src="http://www.advancegroupholdings.com.au/my_logo_nav.png"  /></div>
    <div class="col-md-1">My Jobs</div>
    <div class="col-md-2">Obtain a Quote</div>
    <div class="col-md-2">Submit a New Instruction</div>
    <div class="col-md-1">Settings</div>
    <div class="col-md-1">Help</div>
    <div class="col-md-3"><input class="inputHeight" type="text" placeholder="Enter Your Ref or Job Number"/><i class="fa fa-search"></i></div>
  </div>
</div>

CSS

 .navbar {
  width:80%;
   font-weight: 300;
    border: 1px solid #ccc;
    border-width: 1px 0;
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: #0067b1;
    vertical-align:middle;
    line-height:50px;
}

.inputHeight {
    margin-left: 25px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-style: italic;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: none;
    padding: 5px;
    width: 200px;
    height: 25px;
    margin-top: 0px;

}

Plunker Example

Answer 3

In your specific example it's enough to add vertical-align:middle ; to <img> and to <a> , <i> elements! Also I'd recommend to have <li> elements as inline-block, not inline for more flexibility.

In general case, to align vertically the image height must be equal as other element's line-height in the line and vertical-align:middle has to be set.

If image height is 25px then set:

.mynav li, .mynav i {
    vertical-align:middle;
    line-height:25px;
}
img {
    vertical-align:middle;
    height: 25px;
    line-height:25px;
}

Here you go: https://plnkr.co/edit/Xf3uvvjuqykQMjnhVxes?p=preview