Site Title Doesn't Stay Centered When Browser Window is Shrunk

Question

When the browser window is shrunk the site title goes to the bottom of the navigation window instead of staying centered in it.

Question: Does anybody know how I can have the site title remain centered in my navigation bar until the browser window is small enough that it goes above the list items as I want it to?

My code is here: http://jsfiddle.net/MyersAN/oupkw4uv/

The HTML code for the site title is:

<span><a href="index.html" class="logo" id="home">Hyperdog Productions</a></span>

Thanks!

Answer 1

我进入小提琴并将.logo的样式更改为：

.logo {
    font-family: "PT-Sans", "Calibri Light", sans-serif;
    font-size: 24px;
    letter-spacing: 10px;
    text-align: center;
    text-decoration: none;
    text-shadow: 8px 8px 8px #000000;
    text-transform: uppercase;
    color: #AF7817;
    vertical-align: bottom;
}

我摆脱了position: absolute;的内容并添加了vertical-align: bottom;