Question

我一直在尝试在导航栏中对齐两个图像，但它们不会垂直对齐。它们似乎略高于预期区域。如果有人能提供一些帮助，那将非常感激

理查德

HTML：

<div class="top-bar-wrapper">
<div class="top-bar">
    <ul class="nav-bar-left">
        <li class="logo">
            <img src="resources/logo2.png" height="35px" width="35px">
        </li>
        <li class="title">
            <img src="resources/title.png" height="25px" width="235px">
        </li>
    </ul>
    <ul class="nav-bar-right">
        <li><a href="index.html">Home</a>
        </li>
        <li><a href="">About</a>
        </li>
        <li><a href="">Products</a>
        </li>
        <li><a href="">Login/Register</a>
        </li>
    </ul>
</div>

CSS：

.top-bar-wrapper {
margin: auto;
overflow: auto;
box-shadow: 0 0 5px #000;
top: 0;
position:fixed;
left:0;
right:0;
background: -webkit-linear-gradient(top, rgb(79, 19, 4), rgb(70, 20, 4));
/*Safari 5.1-6*/
background: -o-linear-gradient(top, rgb(79, 19, 4), rgb(70, 20, 4));
/*Opera 11.1-12*/
background: -moz-linear-gradient(top, rgb(79, 19, 4), rgb(70, 20, 4));
/*Fx 3.6-15*/
background: linear-gradient(top, rgb(79, 19, 4), rgb(70, 20, 4));
/*Standard*/
}
.top-bar {
margin: auto;
overflow: auto;
z-index: 1000;
display:block;
width: 1024px;
background: -webkit-linear-gradient(top, rgba(79, 19, 4, 1), rgba(70, 20, 4, 1));
/*Safari 5.1-6*/
background: -o-linear-gradient(top, rgba(79, 19, 4, 1), rgba(70, 20, 4, 1));
/*Opera 11.1-12*/
background: -moz-linear-gradient(top, rgba(79, 19, 4, 1), rgba(70, 20, 4, 1));
/*Fx 3.6-15*/
background: linear-gradient(top, rgba(79, 19, 4, 1), gba(70, 20, 4, 1));
/*Standard*/
}
.top-bar ul {
line-height: 45px;
margin: 0;
padding: 0;
list-style: none;
font-family:'Ubuntu', sans-serif;
}
.top-bar a {
text-decoration: none;
color: #ffffff;
font-size: 14px;
display:block;
}
.nav-bar-left {
float: left;
}
.nav-bar-left li {
text-align: center;
float: left;
display: block;
padding: 0 10px 0 0;
height:45px;
}
.nav-bar-left img {
vertical-align:middle;
}
.nav-bar-right {
float: right;
}
.nav-bar-right li {
text-align: center;
float: left;
width: 115px;
}
.nav-bar-right li:hover {
transition: background 0.4s;
background: -webkit-linear-gradient(top, rgba(105, 13, 4, 1), rgba(85, 13, 4, 1));
/*Safari 5.1-6*/
background: -o-linear-gradient(top, rgba(105, 13, 4, 1), rgba(85, 13, 4, 1));
/*Opera 11.1-12*/
background: -moz-linear-gradient(top, rgba(105, 13, 4, 1), rgba(85, 13, 4, 1));
/*Fx 3.6-15*/
background: linear-gradient(top, rgba(105, 13, 4, 1), rgba(85, 13, 4, 1));
/*Standard*/
}

Answer 1

试试此代码

.nav-bar-left img {
   vertical-align: middle;
   display: inline-block;
   margin-top: -2px;
}

无法在div中对齐图像

1 个答案: