垂直对齐内联ul导航栏旁边的图像

时间:2012-04-28 14:23:35

标签: html css vertical-alignment

有人必须已经这样做但我没有尝试过包括背景图片甚至是桌子。

我有一个960像素宽的包装器,目前我的代码在ul导航栏的同一行显示一个标题:

____________________________________________________________
!         h2 text          !  menu1   !  menu 2  !  menu3  ! 
____________________________________________________________  

我想用一个高于当前文本行的徽标替换h2文本,并将所有内容排在底部,如下所示:

___________________________
!                          !     
!        LOGO.jpg          !
!                          !________________________________ 
!                          !  menu1   !  menu 2  !  menu3  ! 
____________________________________________________________  

在尝试了我能想到的背景图片,表格和其他所有内容之后,我能做的最好的事情就是徽标的顶部与菜单栏的顶部对齐。

____________________________________________________________
!                          !  menu1   !  menu 2  !  menu3  !   
!        LOGO.jpg          !_______________________________! 
!                          !
!                          !   
___________________________!  

目前我有这段代码:

#header {
position: relative;
display: block;
background-color: #003366; 
}


#header ul {
position: absolute;
right: 0px;
top: 2px;
}

#header ul li {
list-style: none;
display: inline;
}

img.bottom 
  {
vertical-align:text-bottom;
  }

    <div id="header"> 
<img src="src/logo.jpg" width="414" height="140" class="bottom" />
  <div id="navbar"> 
             <ul>             
 <li><a href="menu1.htm"><span>Home</span></a></li>
 <li><a href="menu2.htm"><span>About</span></a></li>
 <li><a href="menu3.htm"><span>Contact</span></a></li>
        </ul>
 </div> 
    </div>

是否有一种简单的方法可以将菜单向下移动,以便与jpg的底部对齐?

1 个答案:

答案 0 :(得分:1)

您可以将标题的高度设置为自动,并将ul定位到底部。这是一个jsfiddle:http://jsfiddle.net/YBrkB/