將DIV中的文本對齊到底部

看看這個jsfiddle http://jsfiddle.net/buqhK/embedded/result/。該白色空間是徽標，右側是我想移動到底部，因此它與徽標位於同一高度。那文字Lorania。我該怎麼做？將DIV中的文本對齊到底部

這裏是我的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; 
}

謝謝！

來源

2013-05-06 Kyrbi

是這樣的？ http://jsfiddle.net/ExplosionPIlls/buqhK/1/ – 2013-05-06 21:26:20

你接近它，但我的意思是allligned像這樣http://i.imgur.com/fLMmp5h.png – Kyrbi 2013-05-06 21:29:48

這個怎麼樣？

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

來源

2013-05-06 21:54:01

是的，它的工作原理。我現在覺得很愚蠢。 – Kyrbi 2013-05-06 21:56:13

@Kyrbi很高興知道它工作:) 這很酷，不要爲此感到難過。 – 2013-05-06 21:58:16

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

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

來源

2013-05-06 21:51:56 AniDev

將DIV中的文本對齊到底部

回答

相關問題