將DIV內的文本對齊到底部

Question

看看這個jsfiddle http://jsfiddle.net/buqhK/embedded/result/ 。 那個白色的空間是徽標，右側是我想要移動到底部，所以它與徽標的高度相同。 那文Lorania 。 我該怎么做？

這是我的HTML：

<div id="header">
    <div id="header-wrap">
        <div id="logo"></div>
        <div id="header-text">Lorania</div>
        <hr>
        <div id="menu">
            <ul>
                <li><a href="#" class="righter">aktualley</a>
                </li>
                <li><a href="#" class="righter">local thing</a>
                </li>
                <li><a href="#" class="righter">local club</a>
                </li>
                <li><a href="#" class="righter">local lore</a>
                </li>
                <li><a href="#" class="righter">contact</a>
                </li>
                <li><a href="#" class="righter2">photogaller</a>
                </li>
                <li><a href="#">contast</a>
                </li>
            </ul>
        </div>
    </div>
</div>

這是我的CSS

/* Main CSS*/
html, body{ 
    margin:0; 
    padding:0; 
    height:100%; 
    width:100%; 
    font-family: "Century Gothic", "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", Futura, sans-serif;
}

/* HEADER */
#header {
    background-color: black;
    background-position: center center;
    background-repeat: repeat-y;
    height: 172px;
    width: 100%;
    position: relative;
}
#header-wrap {
    text-align: center;
    margin: 0 auto;
    height: 140px;
    width: 800px;
    padding-top: 30px;
}
#logo {
    background-color: white;
    background-repeat: no-repeat;
    height: 80px;
    width: 330px;
    margin-bottom: 20px;
    float: left;
}
#header-text {
    color: #fff;
    font-size: 40px;
    float: right;
}
#header hr {
    clear: both;
    border: 0;
    height: 1px;
    background: transparent;
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
    background-image:    -moz-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
    background-image:     -ms-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
    background-image:      -o-linear-gradient(left, rgba(255, 255, 255, 0), rgb(255, 255, 255), rgba(255, 255, 255, 0)); 
}
#menu ul { 
    margin: 0; 
    padding: 0; 
}
#menu li {
    display: block;
    float: left;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#menu a {
    color: white;
    text-decoration: none;
}
#menu a:hover {
    text-decoration: underline;
}
#menu a:active {
    text-decoration: underline;
    text-shadow: 0 0 2px white;
}
.righter {
    margin-right: 39px;
}
.righter2 {
    margin-right: 38px;
}

謝謝！

Answer 1

這個怎么樣？

#header-text {
color: #FFFFFF;
float: right;
font-size: 40px;
padding-top: 40px; }

Answer 2

我最近遇到了類似的問題。 我所做的是將徽標和文本放在自己的div中。 外部div有display:inline-block所以圖像會將div擴展到它的最小高度， width:100%所以它占用了父級的所有寬度，而position:relative所以文本可以與徽標完全對齊。 我還刪除了徽標的底部邊距，如果需要，可以將其添加到外部div“header-top”。

我知道它很亂，但我自己並沒有找到更好的方法。 無論如何，這就是我想出的，那就是你想要的嗎？ http://jsfiddle.net/buqhK/3/embedded/result/