Выравнивание текста в нижней части div: я запутался в CSS или в плане? - PullRequest
Новая
       43

Выравнивание текста в нижней части div: я запутался в CSS или в плане?

0 голосов
/ 16 марта 2011

Я использовал Blueprint для создания прототипа очень простого макета страницы ... но после прочтения об абсолютном и относительном позиционировании и нескольких онлайн-учебников по вертикальному позиционированию я не смог заставить работать вещи так, как ядумаю, что они должны.

Вот мой HTML: 

<div class="container" id="header">
  <div class="span-4" id="logo">
    <img src="logo.png" width="150" height="194" />
  </div>
  <div class="span-20 last" id="title">
    <h1 class="big">TITLE</h1>
  </div>
</div>

Документ содержит файл blueprint screen.css.

Я хочу, чтобы TITLE выровнялся по нижней части логотипа, что в практическом смысле означает нижнюю часть заголовка #.

Это была моя первая попытка: 

  #header {
    position: relative;
  }

  #title {
    font-size: 36pt;
    position: absolute;
    bottom: 0;
  }

Не случайно, ретроспективно, это помещает TITLE вровень с левым краем #заголовок ... но это не повлияло на вертикальное расположение заголовка.Итак, я получил в точности противоположное тому, что искал.

Итак, я попробовал это: 

  #title {
    position: relative;
  }

  #title h1 {
    font-size: 36pt;
    position: absolute;
    bottom: 0;
  }

Моя теория состояла в том, что это выровняет элемент h1 с нижней частьюсодержащий div элемент ... но вместо этого он заставил TITLE полностью исчезнуть.Я предполагаю, что это означает, что он где-то рендерится с видимого экрана.

В этот момент я сбит с толку.Я надеюсь, что кто-то здесь может указать мне правильное направление.Спасибо!

Ответы [ 2 ]

1 голос
/ 17 марта 2011

не меняйте позиционирование или плавающие классы чертежей. Это испортит рамки.

То, что вы пытаетесь сделать, будет трудным, потому что то, что вы пытаетесь сделать (я полагаю), это выравнивание базовой линии типа с нижней частью изображения. Нет простого способа определить базовую линию типа с помощью CSS. Таким образом, их выравнивание будет полностью зависеть от конкретного шрифта, который загружается для вашего пользователя. Если ваше изображение имеет высоту 50px, вы можете начать с установки высоты линии вашего h1 на 50px, а затем настроить ее оттуда. Но поймите, что будет разница между браузером и браузером, шрифт к шрифту.

Возможно, вам лучше сделать заголовок частью изображения, а затем использовать некоторые методы замены изображения, чтобы скрыть текст.

0 голосов
/ 17 марта 2011

Попробуйте и дайте мне знать, если это то, что вы пытаетесь достичь?

HTML: 

<div id="container">
    <div class="logo">Logo here</div>
    <h1>TITLE</h1>
</div>

CSS: 

#container{
    background-color:#ccc;
    position:relative;
    width:300px;
    height:200px;
}

.logo{
    width:110px;
    height:40px;
    background-color:#ff0000;
    margin: 0 auto;
}

#container h1{
    font-size:120%;
    font-weight:bold;
    text-align:center;
}

Вот живая демонстрация: http://jsfiddle.net/jrLL2/

...