html - vertically - css vertical align middle




Come allineare il contenuto di un div al fondo? (16)

Dì che ho il seguente codice CSS e HTML:

#header {
  height: 150px;
}
<div id="header">
  <h1>Header title</h1>
  Header content (one or multiple lines)
</div>

La sezione dell'intestazione è a altezza fissa, ma il contenuto dell'intestazione potrebbe cambiare. Vorrei che il contenuto dell'intestazione fosse allineato verticalmente alla parte inferiore della sezione dell'intestazione, in modo che l'ultima riga di testo "si attacchi" alla parte inferiore della sezione dell'intestazione.

Quindi se c'è una sola riga di testo sarebbe come:

-----------------------------
| Header title
|
|
|
| header content (resulting in one line)
-----------------------------

E se ci fossero tre linee:

-----------------------------
| Header title
|
| header content (which is so
| much stuff that it perfectly
| spans over three lines)
-----------------------------

Come può essere fatto in CSS?


2015 soluzione

<div style='width:200px; height:60px; border:1px solid red;'>

    <table width=100% height=100% cellspacing=0 cellpadding=0 border=0>
        <tr><td valign=bottom>{$This_text_at_bottom}</td></tr>
    </table>

</div>

http://codepen.io/anon/pen/qERMdx

prego


Dopo aver lottato con questo stesso problema per qualche tempo, ho finalmente trovato una soluzione che soddisfa tutti i miei requisiti:

  • Non richiede che conosca l'altezza del contenitore.
  • A differenza delle soluzioni relative + assolute, il contenuto non fluttua nel proprio livello (cioè si incorpora normalmente nel contenitore div).
  • Funziona su browser (IE8 +).
  • Semplice da implementare.

La soluzione richiede solo un <div> , che io chiamo "aligner":

CSS

.bottom_aligner {
    display: inline-block;
    height: 100%;
    vertical-align: bottom;
    width: 0px;
}

html

<div class="bottom_aligner"></div>
... Your content here ...

Questo trucco funziona creando un div alto e sottile, che spinge la linea di base del testo sul fondo del contenitore.

Ecco un esempio completo che realizza ciò che l'OP chiedeva. Ho reso il "bottom_aligner" spesso e rosso a solo scopo dimostrativo.

CSS:

.outer-container {
  border: 2px solid black;
  height: 175px;
  width: 300px;
}

.top-section {
  background: lightgreen;
  height: 50%;
}

.bottom-section {
  background: lightblue;
  height: 50%;
  margin: 8px;
}

.bottom-aligner {
  display: inline-block;
  height: 100%;
  vertical-align: bottom;
  width: 3px;
  background: red;
}

.bottom-content {
  display: inline-block;
}

.top-content {
  padding: 8px;
}

HTML:

<body>
  <div class="outer-container">
    <div class="top-section">
      This text
      <br> is on top.
    </div>
    <div class="bottom-section">
      <div class="bottom-aligner"></div>
      <div class="bottom-content">
        I like it here
        <br> at the bottom.
      </div>
    </div>
  </div>
</body>


Ecco un'altra soluzione che utilizza la tecnologia flexbox, ma senza utilizzare il flex-end per l'allineamento del fondo. L'idea è di impostare margin-bottom su h1 su auto per spingere il contenuto rimanente verso il basso:

#header {
  height: 350px;
  display:flex;
  flex-direction:column;
  border:1px solid;
}

#header h1 {
 margin-bottom:auto;
}
<div id="header">
  <h1>Header title</h1>
  Header content (one or multiple lines) Header content (one or multiple lines)Header content (one or multiple lines) Header content (one or multiple lines)
</div>

Possiamo anche fare lo stesso con margin-top:auto sul testo, ma in questo caso dobbiamo avvolgerlo in un div o span :

#header {
  height: 350px;
  display:flex;
  flex-direction:column;
  border:1px solid;
}

#header span {
 margin-top:auto;
}
<div id="header">
  <h1>Header title</h1>
  <span>Header content (one or multiple lines)</span>
</div>


Gli elementi inline o inline-block possono essere allineati alla fine degli elementi a livello di blocco se l'altezza riga dell'elemento padre / blocco è maggiore di quella dell'elemento in linea. *

markup:

<h1 class="alignBtm"><span>I'm at the bottom</span></h1>

css:

h1.alignBtm {
  line-height: 3em;
}
h1.alignBtm span {
  line-height: 1.2em;
  vertical-align: bottom;
}

* assicurati di essere in modalità standard


Il modo moderno per farlo sarebbe usare la flexbox . Vedi l'esempio qui sotto. Non hai nemmeno bisogno di avvolgere del Some text... in qualsiasi tag HTML, poiché il testo direttamente contenuto in un contenitore flessibile è racchiuso in un oggetto flessibile anonimo.

header {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  flex-direction: column;          /* top to bottom */
  justify-content: space-between;  /* first item at start, last at end */
}
h1 {
  margin: 0;
}
<header>
  <h1>Header title</h1>
  Some text aligns to the bottom
</header>

Se c'è solo del testo e vuoi allineare verticalmente al fondo del contenitore.

section {
  border: 1px solid blue;
  height: 150px;
  display: flex;                   /* defines flexbox */
  align-items: flex-end;           /* bottom of the box */
}
<section>Some text aligns to the bottom</section>


Il posizionamento relativo + assoluto è la soluzione migliore:

#header {
  position: relative;
  min-height: 150px;
}

#header-content {
  position: absolute;
  bottom: 0;
  left: 0;
}

#header, #header * {
  background: rgba(40, 40, 100, 0.25);
}
<div id="header">
  <h1>Title</h1>
  <div id="header-content">Some content</div>
</div>

Ma potresti incontrare problemi con questo. Quando ho provato ho avuto problemi con menu a tendina che appaiono sotto il contenuto. Non è carino

Onestamente, per problemi di centraggio verticale e, beh, qualsiasi problema di allineamento verticale con gli oggetti non è fissato in altezza, è più facile usare solo le tabelle.

Esempio: puoi fare questo layout HTML senza usare le tabelle?


Io uso queste proprietà e funziona!

#header {
  display: table-cell;
  vertical-align: bottom;
}

Non hai bisogno di un assoluto + relativo per questo. È molto possibile utilizzare la posizione relativa sia per il contenitore che per i dati. Questo è come lo fai.

Supponiamo che l'altezza dei tuoi dati sia x . Il tuo contenitore è relativo e il piè di pagina è anche relativo. Tutto quello che devi fare è aggiungere i tuoi dati

bottom: -webkit-calc(-100% + x);

I tuoi dati saranno sempre nella parte inferiore del tuo contenitore. Funziona anche se hai un contenitore con altezza dinamica.

L'HTML sarà così

<div class="container">
  <div class="data"></div>
</div>

I CSS saranno come questo

.container{
  height:400px;
  width:600px;
  border:1px solid red;
  margin-top:50px;
  margin-left:50px;
  display:block;
}
.data{
  width:100%;
  height:40px;
  position:relative;
   float:left;
  border:1px solid blue;
  bottom: -webkit-calc(-100% + 40px);
   bottom:calc(-100% + 40px);
}

Esempio dal vivo qui

Spero che questo ti aiuti.


Se non sei preoccupato per i browser legacy usa un flexbox.

L'elemento genitore ha bisogno del suo tipo di visualizzazione impostato su flex

div.parent {
  display: flex;
  height: 100%;
}

Quindi si imposta l'auto-allineamento dell'elemento figlio su flex-end.

span.child {
  display: inline-block;
  align-self: flex-end;
}

Ecco la risorsa che ho imparato: http://css-tricks.com/snippets/css/a-guide-to-flexbox/


Se si dispone di più elementi di altezza dinamica, utilizzare i valori di visualizzazione CSS della tabella e della cella della tabella:

HTML

<html>
<body>

  <div class="valign bottom">
    <div>

      <div>my bottom aligned div 1</div>
      <div>my bottom aligned div 2</div>
      <div>my bottom aligned div 3</div>

    </div>
  </div>

</body>
</html>

CSS

html,
body {
  width: 100%;
  height: 100%;
}
.valign {
  display: table;
  width: 100%;
  height: 100%;
}
.valign > div {
  display: table-cell;
  width: 100%;
  height: 100%;
}
.valign.bottom > div {
  vertical-align: bottom;
}

Ho creato una demo JSBin qui: http://jsbin.com/INOnAkuF/2/edit

La demo ha anche un esempio su come centrare verticalmente l'allineamento usando la stessa tecnica.


Sembra funzionare:

#content {
    /* or just insert a number with "px" if you're fighting CSS without lesscss.org :) */
    vertical-align: [email protected]_height + @content_height;

    /* only need it if your content is <div>,
     * if it is inline (e.g., <a>) will work without it */
    display: inline-block;
}

L'uso di less rende la risoluzione dei puzzle CSS molto più simile alla programmazione ... Mi piace il CSS. È un vero piacere quando puoi cambiare l'intero layout (senza romperlo :) semplicemente cambiando un parametro.


So che questo ha più di 2 anni, ma ho ideato un modo molto più semplice di quello che è stato menzionato.

Imposta l'altezza del div header. Quindi, all'interno di questo, modifica il tuo tag H1 come segue:

float: left;
padding: 90px 10px 11px

Sto lavorando su un sito per un cliente, e il design richiede che il testo sia nella parte inferiore di un certo div. Ho raggiunto il risultato usando queste due linee e funziona perfettamente. Inoltre, se il testo si espande, il padding rimarrà lo stesso.


Usa il posizionamento CSS.

/* creates a new stacking context on the header */
#header {
  position: relative;
}

/* positions header-content at the bottom of header's context */
#header-content {
  position: absolute;
  bottom: 0;
}

Come notato dal cletus , è necessario identificare il contenuto dell'intestazione per farlo funzionare.

<span id="header-content">some header content</span> 

<div style="height:100%; position:relative;">                                              
    <div style="height:10%; position:absolute; bottom:0px;">bottom</div>
</div> 

prova con:

div.myclass { margin-top: 100%; }

prova a cambiare la% per risolverlo. Esempio: 120% o 90% ... ecc.


una soluzione molto semplice, su una sola riga, è quella di aggiungere line-heigth al div, avendo in mente che tutto il testo del div andrà in basso.

CSS:

#layer{width:198px;
       height:48px;
       line-height:72px;
       border:1px #000 solid}
#layer a{text-decoration:none;}

HTML:

<div id="layer">
    <a href="#">text at div's bottom.</a>
</div>

tieni a mente che questa è una soluzione pratica e veloce quando vuoi che il testo all'interno div diventi discendente, se hai bisogno di combinare immagini e cose, dovrai codificare un CSS un po 'più complesso e reattivo


#header {
    height: 150px;
    display:flex;
    flex-direction:column;
}

.top{
    flex: 1;
}   

<div id="header">
    <h1 class="top">Header title</h1>
    Header content (one or multiple lines)
</div>

#header {
    height: 250px;
    display:flex;
    flex-direction:column;
    background-color:yellow;
}

.top{
    flex: 1;
}
<div id="header">
    <h1 class="top">Header title</h1>
    Header content (one or multiple lines)
</div>







vertical-alignment