html titolo Come allineare verticalmente il testo in un div?
scrivere centrato in html (23)
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> Questa è la soluzione più pulita che ho trovato (IE9 +) e aggiunge una correzione per il problema "off by .5 pixel" utilizzando lo transform-style che altre risposte avevano omesso.
.parent-element {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.element {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
Fonte: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
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/
Puoi allineare il testo centrale verticalmente all'interno di un div usando la flexbox.
<div>
<p class="testimonialText"> This is the testimonial text. </p>
</div>
div {
display: flex;
align-items: center;
}
Puoi saperne di più su questo link: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
C'è un modo più semplice per allineare verticalmente il contenuto senza ricorrere alla tabella / tabella-cella:
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%;
}
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%);
}
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:absoluteper il posizionamento preciso deldivall'interno di undiv - conosciamo l'altezza del
divinterno perché lo impostiamo a20px. -
calc(50% - 10px)per il 50% - metà dell'altezza per centrare ildivinterno
Secondo la risposta di Adam Tomat, è stato preparato un example jsfiddle per allineare il testo in div
<div class="cells-block">
text<br/>in the block
</div>
utilizzando display: flex in CSS
.cells-block {
display: flex;
flex-flow: column;
align-items: center; /* vertically */
justify-content: flex-end; /* horisontally */
text-align: right; /* addition: for text's lines */
}
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;
}
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*/
}
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
L'uso della griglia di CSS lo ha fatto per me.
.outer {
background-color: grey;
width: 10rem;
height: 10rem;
display: grid;
justify-items: center;
}
.inner {
background-color: red;
align-self: center;
}
<div class='outer'>
<div class='inner'>
Content
</div>
</div>
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
}
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>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.
Usando flex fai attenzione alle differenze nel rendering dei browser.
Funziona bene sia per Chrome che per IE:
.outer {
display: flex;
width: 200px;
height: 200px;
background-color: #ffc;
}
.inner {
display: flex;
width: 50%;
height: 50%;
margin: auto;
text-align: center;
justify-content: center;
align-items: center;
background-color: #fcc;
}<div class="outer"><div class="inner">Active Tasks</div></div>Confronta con quello che funziona solo con Chrome:
.outer {
display: flex;
width: 200px;
height: 200px;
background-color: #ffc;
}
.inner {
display: flex;
width: 50%;
height: 50%;
margin: auto;
background-color: #fcc;
}<div class="outer">
<div class="inner"><span style=" margin: auto;">Active Tasks</span></div>
</div><!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>
È 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.
h1{
margin:0;
position: absolute;
left:50%;
top:50%;
transform:translate(-50%, -50%);
}
.container {
height: 200px;
width: 500px;
position: relative;
border: 1px solid #eee;
} <div class="container">
<h1>vertical align text</h1>
</div>Con questo trucco, puoi allineare qualsiasi cosa se non vuoi renderlo centrale aggiungi "left: 0" per allineare a sinistra.
È necessario aggiungere l'attributo line-height e tale attributo deve corrispondere all'altezza del div . Nel tuo caso:
.center {
height: 309px;
line-height: 309px; /* same as height! */
}<div class="center">
A single line.
</div> In effetti, potresti probabilmente rimuovere completamente l'attributo height .
Questo funziona solo per una riga di testo , quindi fai attenzione.
Ci sono diversi trucchi per visualizzare il contenuto / immagine nel centro di Div. Alcune risposte sono davvero belle e sono pienamente d'accordo anche con queste.
Centratura orizzontale e verticale assoluta in CSS
Esistono più di 10 tecniche con esempi . Ora tocca a te quale preferisci.
Nessun dubbio, display:table; display:table-Cell display:table; display:table-Cell è un trucco migliore.
Alcuni buoni trucchi stanno seguendo:
Trucco 1 - utilizzando display:table; display:table-cell display:table; display:table-cell
HTML
<div class="Center-Container is-Table">
<div class="Table-Cell">
<div class="Center-Block">
CONTENT
</div>
</div>
</div>
Codice CSS
.Center-Container.is-Table { display: table; }
.is-Table .Table-Cell {
display: table-cell;
vertical-align: middle;
}
.is-Table .Center-Block {
width: 50%;
margin: 0 auto;
}
Trucco 2 - Usando display:inline-block
HTML
<div class="Center-Container is-Inline">
<div class="Center-Block">
CONTENT
</div>
</div>
Codice CSS
.Center-Container.is-Inline {
text-align: center;
overflow: auto;
}
.Center-Container.is-Inline:after,
.is-Inline .Center-Block {
display: inline-block;
vertical-align: middle;
}
.Center-Container.is-Inline:after {
content: '';
height: 100%;
margin-left: -0.25em; /* To offset spacing. May vary by font */
}
.is-Inline .Center-Block {
max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
/* max-width: calc(100% - 0.25em) /* Only for IE9+ */
}
Trucco 3 - Usando la position:relative;position:absolute
<div style="position: relative; background: #ddd; border: 1px solid #ddd; height: 250px;">
<div style="width: 50%; height: 60%; overflow: auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #ccc; text-align: center;">
<h4>ABSOLUTE CENTER,<br>
WITHIN CONTAINER.</h4>
<p>This box is absolutely centered, horizontally and vertically, within its container</p>
</div>
</div>
Se devi utilizzare la proprietà min-height devi aggiungere questo CSS su:
.outerContainer .innerContainer {
height: 0;
min-height: 100px;
}
CSS:
.vertical {
display: table-caption;
}
Aggiungi questa classe all'elemento che contiene le cose che vuoi allineare verticalmente
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>
