titolo - scrivere centrato in html




Come allineare verticalmente il testo in un div? (19)

Aggiornamento: ecco una grande risorsa

http://howtocenterincss.com/

Centrare in CSS è un rompicoglioni. Sembra che ci siano molti modi per farlo, a seconda di una varietà di fattori. Questo li consolida e ti dà il codice che ti serve per ogni situazione.

Aggiornamento: utilizzo di Flexbox

In linea con il mantenimento di questo post aggiornato con l'ultima tecnologia, ecco un modo molto più semplice per centrare qualcosa usando la flexbox. Flexbox non è supportato in IE9 and lower versioni precedenti.

Ecco alcune grandi risorse:

jsfiddle con prefissi del browser

HTML

<ul>
    <li>
        <p>Some Text</p>
    </li>
    <li>
        <p>A bit more text that goes on 2 lines</p>
    </li>
    <li>
        <p>Even more text that demonstrates how lines can span multiple lines</p>
    </li>
</ul>

CSS

li {
    display: flex;
    justify-content:center;
    align-content:center;
    flex-direction:column; /* column | row */
}

Aggiornamento - Un'altra soluzione

Questo è da zerosixthree e ti permette di centrare qualsiasi cosa con 6 linee di css

Questo metodo non è supportato in IE8 and lower

jsfiddle

HTML

<ul>
    <li>
        <p>Some Text</p>
    </li>
    <li>
        <p>A bit more text that goes on 2 lines</p>
    </li>
    <li>
        <p>Even more text that demonstrates how lines can span multiple lines</p>
    </li>
</ul>

CSS

p {
    text-align: center;
    position: relative;
    top: 50%;
    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

Risposta precedente

Approccio semplice e cross browser, utile come collegamenti nella risposta contrassegnata sono leggermente obsoleti.

Come centrare verticalmente e orizzontalmente il testo sia in una lista non ordinata che in una div senza fare ricorso a JavaScript o alle altezze della linea css . Indipendentemente dal testo che hai, non dovrai applicare classi speciali a elenchi o div specifici (il codice è lo stesso per ciascuno). Funziona su tutti i principali browser tra cui IE9, IE8, IE7, IE6, Firefox, Chrome, Opera e Safari. Ci sono 2 fogli di stile speciali (1 per IE7 e un altro per IE6) per aiutarli a causa delle loro limitazioni CSS che i browser moderni non hanno.

Andy Howard - Come centrare verticalmente e orizzontalmente il testo in una lista non ordinata o div

Edit: Dato che non mi importava molto di IE7 / 6 per l'ultimo progetto a cui ho lavorato, ho usato una versione leggermente ridotta (cioè rimossa le cose che hanno funzionato in IE7 e 6). Potrebbe essere utile per qualcun altro ...

jsfiddle

HTML

<ul>
    <li>
        <div class="outerContainer">
          <div class="innerContainer">
            <div class="element">
                <p><!-- Content --></p>
            </div>
          </div>
        </div>
    </li>
    <li>
        <div class="outerContainer">
          <div class="innerContainer">
            <div class="element">
                <p><!-- Content --></p>
            </div>
          </div>
        </div>
    </li>
</ul>

E il CSS:

.outerContainer {
    display: table;
    width: 100px; /* width of parent */
    height: 100px; /* height of parent */
    overflow: hidden;
}
.outerContainer .innerContainer {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}
li {
    background: #ddd;
    width: 100px;
    height: 100px;
}

Sto cercando di trovare il modo più efficace per allineare il testo con un div. Ho provato alcune cose e nessuna sembra funzionare.

.testimonialText {
  position: absolute;
  left: 15px;
  top: 15px;
  width: 150px;
  height: 309px;
  vertical-align: middle;
  text-align: center;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-style: italic;
  padding: 1em 0 1em 0;
}
<div class="testimonialText">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>


È facile con display: flex . Con il seguente metodo, il testo nel div sarà centrato in verticale:

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  /* more style: */
  height: 300px;
  background-color: #888;
}
<div>
  Your text here.
</div>

E se vuoi, orizzontale:

div {
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  /* more style: */
  height: 300px;
  background-color: #888;
}
<div>
  Your text here.
</div>

Devi vedere la versione del browser che ti serve; nelle vecchie versioni il codice non funziona.


C'è un modo più semplice per allineare verticalmente il contenuto senza ricorrere alla tabella / tabella-cella:

http://jsfiddle.net/bBW5w/1/

In esso ho aggiunto un div invisibile (larghezza = 0) che assume l'intera altezza del contenitore.

Sembra funzionare in IE e FF (ultime versioni), non ha controllato con altri browser

  <div class="t">
     <div>
         everything is vertically centered in modern IE8+ and others.
     </div>
      <div></div>
   </div>

E ovviamente il CSS:

.t, .t > div:first-child
{ 
    border:1px solid green;
}
.t
{
    height:400px;
}
.t > div 
{ 
    display:inline-block; 
    vertical-align:middle  
}
.t > div:last-child
{
    height:100%;    
}

CSS:

.vertical {
   display: table-caption;
}

Aggiungi questa classe all'elemento che contiene le cose che vuoi allineare verticalmente


Controlla questa semplice soluzione:

HTML

<div class="block-title"><h3>I'm a vertically centered element</h3></div>

CSS

.block-title {
    float:left;
    display:block;
    width:100%;
    height:88px
}

.block-title h3 {
   display:table-cell;
   vertical-align:middle;
   height:inherit
}

JSFiddle


Ecco una soluzione che funziona meglio per una singola riga di testo.

Può anche funzionare per il testo multi-linea con qualche ritocco se il numero di linee è noto

.testimonialText{
    font-size:1em;/*Set a font size*/
}
.testimonialText:before {/*add a pseudo element*/
    content:"";
    display:block;
    height:50%;
    margin-top:-0.5em;/*half of the font size*/
}

Ecco un JSFiddle


Hmm, ci sono ovviamente molti modi per risolvere questo.

Ma ho un <div> che è posizionato assolutamente, height:100% (in realtà, in top:0;bottom:0 e larghezza fissa) e display:table-cell non ha funzionato per centrare il testo verticalmente. La mia soluzione richiedeva un elemento di span interno, ma vedo anche molte altre soluzioni, quindi potrei anche aggiungerlo:

Il mio contenitore è un .label e voglio il numero verticalmente centrato in esso. L'ho fatto posizionandolo assolutamente in top:50% e impostando l' line-height:0

<div class="label"><span>1.</span></div>

E il CSS è il seguente:

.label {
    position:absolute;
    top:0;
    bottom:0;
    width:30px;
}

.label>span {
    position:absolute;
    top:50%;
    line-height:0;
}

Guardalo in azione: http://jsfiddle.net/jcward/7gMLx/


Io uso il seguente per centrare verticalmente elementi casuali facilmente:

HTML:

<div style="height: 200px">
    <div id="mytext">This is vertically aligned text within a div</div>
</div>

CSS:

#mytext {
    position: relative;
    top: 50%; 
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

Questo centra il testo nel mio div esattamente al centro verticale di un div esterno alto 200px. Si noti che potrebbe essere necessario utilizzare un prefisso del browser (come -webkit- nel mio caso) per farlo funzionare per il browser.

Funziona non solo per il testo, ma anche per altri elementi.


Non una singola risposta mi ha aiutato, prova questo, aggiungi al genitore div:

display:flex;
align-items:center;

Prova ad incorporare un elemento tabella.

<div>
    <table style='width:200px; height:100px;'>
        <td style='vertical-align:middle;'>
            copenhagen
        </td>
    </table>
</div>

Puoi farlo impostando il display su "table-cell" e applicando un vertical-align: middle;

    {
        display:table-cell;
        vertical-align:middle;
    }

Tuttavia, questo non è supportato da tutte le versioni di Internet Explorer in base a questo estratto che ho copiato da http://www.w3schools.com/cssref/pr_class_display.asp senza autorizzazione.

Nota: i valori "inline-table", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row -group "e" inherit "non sono supportati da IE7 e precedenti. IE8 richiede un! DOCTYPE. IE9 supporta i valori.

La seguente tabella mostra i valori di visualizzazione consentiti anche da http://www.w3schools.com/cssref/pr_class_display.asp . Spero che questo possa essere d'aiuto


Questa è la mia soluzione preferita per questo problema (browser semplice e molto ben supportato):

div{
    margin:5px;
    text-align:center;
    display:inline-block;
}

.vcenter{
    background:#eee;
    width: 150px;
    height: 150px;
}
.vcenter:before {
    content: " ";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    max-width: 0.001%; /* Just in case the text wrapps, you shouldn't notice it */
}
    
.vcenter :first-child {
    display:inline-block;
    vertical-align:middle;
    max-width: 99.999%;
}
<div class="vcenter">
  <p>This is my Text</p>
</div>
<div class="vcenter">
  <h4>This is my Text<br />Text<br />Text</h4>
</div>
<div class="vcenter">
  <div>
   <p>This is my</p>
   <p>Text</p>
  </div>
</div>

-MODIFICARE-

Al giorno d'oggi (non abbiamo più bisogno di IE6-7-8) userò semplicemente il display css: tabella per questo problema

.vcenter{
    display: table;
    background:#eee;
    width: 150px;
    height: 150px;
    text-align: center;
}
    
.vcenter :first-child {
    display: table-cell;
    vertical-align: middle;
}
<div class="vcenter">
  <p>This is my Text</p>
</div>
   


Questa è un'altra variazione del div in un modello div usando calc() in CSS.

<div style="height:300px; border:1px solid green;">
  Text in outer div.
  <div style="position:absolute; height:20px; top:calc(50% - 10px); border:1px solid red;)">
    Text in inner div.
  </div>
</div>

Funziona, perché:

  • position:absolute per il posizionamento preciso del div all'interno di un div
  • conosciamo l'altezza del div interno perché lo impostiamo a 20px .
  • calc(50% - 10px) per il 50% - metà dell'altezza per centrare il div interno

Se devi utilizzare la proprietà min-height devi aggiungere questo CSS su:

.outerContainer .innerContainer {
    height: 0;
    min-height: 100px;
}

Semplice come questo, dai documenti :

La proprietà CSS con allineamento verticale specifica l'allineamento verticale di una casella inline o di una cella di tabella.

#HTML
<div>
  <span>Text</span>
</div>

#CSS
span {
  vertical-align: middle;
}

Soluzione semplice a un elemento di non conoscenza dei valori

HTML

<div class="main">
    <div class="center">
        whatever
    </div>
</div>

CSS

.main {
    position: relative
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
}

Centratura verticale in CSS
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Riassunto dell'articolo:

Per il browser CSS2 si può usare display:table / display:table-cell per centrare il contenuto.

Campione disponibile anche su JSFiddle :

div { border:1px solid green;}
<div style="display: table; height: 400px; overflow: hidden;">
  <div style="display: table-cell; vertical-align: middle;">
    <div>
      everything is vertically centered in modern IE8+ and others.
    </div>
  </div>
</div>

È possibile unire gli hack per il vecchio browser (IE6 / 7) in stili con l'uso di # per nascondere gli stili dai browser più recenti:

div { border:1px solid green;}
<div style="display: table; height: 400px; #position: relative; overflow: hidden;">
  <div style=
    "#position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
    <div style=" #position: relative; #top: -50%">
      everything is vertically centered
    </div>
  </div>
</div>


HTML

<div class="relative"><!--used as a container-->
    <!-- add content here to to make some height and width
    example:<img src="" alt=""> -->
    <div class="absolute">
        <div class="table">
            <div class="table-cell">
                Vertical contents goes here
            </div>
        </div>
    </div>
</div>

CSS

 .relative{
    position:relative;
 }
 .absolute{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0,0,0,0.5);
 }
 .table{
    display:table;
    height:100%;
    width:100%;
    text-align:center;
    color:#fff;
 }
 .table-cell{
    display:table-cell;
    vertical-align:middle;
 }

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container{
        height:250px;
        background:#f8f8f8;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-align: center;
        justify-content: center;
      }
      p{
      font-size:24px;}
    </style>
  </head>
  <body>
    <div class="container">
      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </body>
</html>




vertical-alignment