titolo - scrivere centrato in html
Come allineare verticalmente il testo in un div? (19)
Aggiornamento: ecco una grande risorsa
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:
- Una guida alla flexbox
- Elementi di centraggio con flexbox
- Sintassi IE10 per la flexbox
- Supporto per Flexbox
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
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 ...
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:
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
}
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*/
}
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 deldiv
all'interno di undiv
- conosciamo l'altezza del
div
interno perché lo impostiamo a20px
. -
calc(50% - 10px)
per il 50% - metà dell'altezza per centrare ildiv
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>