Выравнивание текста внутри 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/ –

Вы близки к нему, но я имею в виду подслащенный снизу, как это http://i.imgur.com/fLMmp5h.png – Kyrbi

Как насчет этого?

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

источник

2013-05-06 21:54:01

Да, это работает. Сейчас я чувствую себя совсем немой. – Kyrbi

@ Kyrbi Рад узнать, что это сработало :) И это круто, не чувствую себя плохо. –

Недавно я столкнулся с аналогичной проблемой. То, что я сделал, было помещено логотипом и текстом в свой собственный div. У внешнего div было display:inline-block, поэтому изображение увеличило бы div до минимальной высоты, width:100%, чтобы он занимал всю ширину родителя и position:relative, чтобы текст мог быть абсолютно выровнен с логотипом. Я также удалил нижнее поле логотипа, которое можно было бы добавить к внешнему div-заголовку, если это необходимо.

Я знаю, что это грязно, но я на самом деле не нашел лучшего способа. Во всяком случае, это то, что я придумал, это то, что вы хотели? http://jsfiddle.net/buqhK/3/embedded/result/

источник

2013-05-06 21:51:56 AniDev

Выравнивание текста внутри DIV внизу

ответ

Смежные вопросы