我有一个img (logo超链接)和一个text(超链接)在我的headerdiv中。我想要的是文本和图像的底部边缘沿着div的底部对齐。现在我有一个100px高的img和15px的文本，文本沿着图像的中心水平对齐。
这是我的源代码html的样子
</head>
<body bgcolor="#660099">
<div class="gridContainer clearfix">
<div id="header">
<h1>
<a href="index.html"><img src="graphics_home/mini_logo.jpg" alt="the white dove woodstock" width="159" height="99" border="0" align="absbottom" /></a>
<a href="rooms.html" class="hlink">Rooms</a> <a href="todo.html" class="hlink">ToDo</a> <a href="about.html" class="hlink">About</a> <a href="bloc.html"class="hlink">Blog</a> <a href="shop.html" class="hlink">Shop</a> <a href="reservations.html" class="hlink">Reservations</a>
</h1>
</div>
和这是我的排版css看起来像:
#header h1{
color: #cc0099;
font-family: 'victor_moscosoregular', mono;
font-size: 15px;
font-style: normal;
font-weight: normal;
margin-bottom: auto;
margin-top: auto;
word-spacing: .15 em;
}
a.hlink:link {
color: #cc0099;
text-decoration: none;
}
a.hlink:hover {
color: #cc99ff;
}
有什么简单的想法，我应该让一切"坐"沿着底部边缘的HeaderDiv?
我想发一张图片，但是他们不让我发
我在JSFiddle中尝试了下面的代码:
http://jsfiddle.net/YU6mw/1/我添加了一个<br>标签，使它进入下一行，我希望它工作!
//你的意思是这样吗
a:first-child{
position:relative;
display:block;
text-align:left;
color:#fff;
}
a:hover{
color:gold;
}