L'allineamento del testo alla parte inferiore di un div: sto confuso su CSS o su progetto?

Question

Ho usato Blueprint al prototipo di un semplice layout di pagina ... ma dopo aver letto su assoluto rispetto posizionamento relativo e una serie di tutorial online per quanto riguarda il posizionamento verticale, io non sono in grado di far funzionare le cose il modo in cui pensare dovrebbero.

Ecco il mio 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>

Il documento include il file progetto screen.css.

Voglio TITOLO allineato con il fondo del logo, che in termini pratici significa che il fondo del #header.

Questo è stato il mio primo tentativo:

  #header {
    position: relative;
  }

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

Non inaspettatamente, in retrospettiva, questo mette TITOLO filo lasciato con il bordo sinistro del #header ... ma non è riuscito a influenzare il posizionamento verticale del titolo. Così ho ottenuto esattamente il contrario di quello che stavo cercando.

Così ho provato questo:

  #title {
    position: relative;
  }

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

La mia teoria è che questo sarebbe Allinea l'elemento h1 con la parte inferiore dell'elemento div contenente ... ma invece ha fatto TITOLO sparire, completamente. Credo che questo significa che è di rendering fuori da qualche parte visibile dello schermo.

A questo punto io sono sconcertato. Sto sperando che qualcuno qui mi può puntare nella giusta direzione. Grazie!

Answer 1

non andare cambiare posizionamento o flottante delle classi progetto. Quella volontà rovinare il quadro.

Quello che si sta cercando di fare è che sarà difficile, perché ciò che si sta cercando di fare (presumo) è allineare la linea di base del tipo con la parte inferiore dell'immagine. Non v'è alcun modo semplice per determinare la linea di base di tipo tramite CSS. Quindi, far loro allineati sta per essere totalmente dipendente dal carattere particolare, che i carichi per l'utente. Se l'immagine è 50px alto, si potrebbe iniziare impostando l'altezza della linea del vostro H1 a 50 px e poi ottimizzare da lì. Ma capire che ci sarà varianza da browser a browser, carattere per carattere.

Sei probabilmente meglio fare la vostra parte intestazione dell'immagine quindi utilizzare alcune tecniche di sostituzione immagine per nascondere il testo.

Answer 2

Dare a questo un andare e fatemi sapere se è quello che si sta cercando di raggiungere?

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;
}

Ecco una demo live: http://jsfiddle.net/jrLL2/