Question

我想将徽标图像与导航栏对齐，以便徽标位于左侧，导航栏位于中心位置。你可以在这里看到我尝试过的内容：http://jsfiddle.net/4fTwh/

HTML：

<body>
    <div class="navigation">
        <p> <img class="logo-img" src="http://icons.iconarchive.com/icons/tatice/browsers/128/Google-Chrome-icon.png" alt="Logo">
            <ul id="nav-list">
                <li><a href="">Home</a></li>
                <li><a href="">News</a></li>
                <li><a href="">Contact</a></li>
                <li><a href="">About</a></li>
            </ul>
        </p>        
    </div>
</body>

CSS：

.navigation{
    width: 100%;
    text-align: center;
    background-color: #CEE3F6; 
}

#nav-list{
   list-style-type: none;
}

#nav-list li{
   display: inline;
   font-size: 18px;
   margin: 20px;
}
.logo-img{
    float: left;
    margin: 0px 15px 15px 0px;
}

现在，我希望导航栏文本与徽标图像底部对齐。而且彩色背景也是图像的高度（导航栏文本周围不低，就像现在一样）。所以基本上，如何将徽标（左侧）和导航栏（居中）包装在一起，以便背景是这两个元素中较高的高度？

Answer 1

尝试这样：DEMO

.navigation {
    width: 100%;
    text-align: center;
    background-color: #CEE3F6;
    vertical-align:bottom;
    line-height:120px;
    height:120px;
}

#nav-list li {
    display: inline-block;
    font-size: 18px;
    margin: 20px;
    vertical-align:bottom;
    line-height:normal;   
}

.logo-img {
    position:absolute;
    left:10px;
    top:10px;
    margin: 0px 15px 15px 0px;
}

Answer 2

你在找这样的东西吗？

#nav-list{
   list-style-type: none;
   background: url('http://icons.iconarchive.com/icons/tatice/browsers/128/Google-Chrome-icon.png') no-repeat;
padding: 102px 0 0 0;
}

http://jsfiddle.net/4fTwh/2/

Answer 3

你可以试试这个：

Demo

.logo{
    display:inline-block;
    float:left
}
#nav-list{
    margin-top:55px;
    list-style-type: none;
    float:left; display:inline-block;
}

Answer 4

在您的HTML中，我会移除<p>标记。它不会在这里添加任何值。

你的CSS几乎就在那里。以下是我对它所做的改动。

.navigation{
  width: 100%;
  text-align: center;
  background-color: #CEE3F6; 
  overflow: hidden /* This Allows for the Background to span the entire height */
}

#nav-list{
  list-style-type: none;
  float: left; /* Keeps the elements side by side*/
  margin-bottom: 0 /* fix the spacing to allow the menu to be at the bottom */
}

#nav-list li{
  float: left; /* allows the li tags to be side by side. */
  font-size: 18px;
  margin: 20px 20px 0 0; /* Fixed a little of the spacing, etc. */
  padding:69px 0 0 0 /* Moved the LI down to be at the bottom*/
}

.logo-img{
  float: left;  
  margin: 0px 15px 0 0px; /* fixed the spacing. */
}

以下是jsFiddle

将徽标图像与导航栏对齐

4 个答案: