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/

将DIV内的文本对齐到底部

2 个答案: