Eu sunt încercarea de a găsi cea mai eficientă cale pentru a alinia textul cu un div. Am încercat câteva lucruri și niciunul nu pare să funcționeze.
.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>
Centrarea verticala in CSS
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
Articolul rezumat:
Pentru un CSS 2 browser-ul, se poate folosi display:table
/display:table-cell
la centru de conținut.
Un eșantion este, de asemenea, disponibil la [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>
Este posibil să fuzioneze hacks pentru browserele vechi (Internet Explorer 6/7) în stiluri cu ajutorul #
pentru a ascunde mai noi stiluri de la browsere:
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>
Aveți nevoie pentru a adăuga line-height
atribut și ca atribut trebuie să se potrivească cu înălțimea div
. În cazul tău:
.center {
height: 309px;
line-height: 309px; /* same as height! */
}
<div class="center">
A single line.
</div>
În fapt, probabil că ai putea elimina "înălțimea" atribut cu totul.
Aceasta funcționează doar pentru o linie de text, deși, astfel încât să fie atent.
Din http://howtocenterincss.com/:
Centrarea în CSS este o durere în fund. Nu pare să fie de o mie de moduri de a face, în funcție de o varietate de factori. Acest lucru le consolidează și vă oferă codul de care aveți nevoie pentru fiecare situație.
Inline cu păstrarea acest post până la curent cu cele mai recente tech, aici's-un mod mult mai ușor la centru ceva folosind Flexbox. Flexbox e't sprijinit în Internet Explorer 9 și inferioară.
Aici sunt unele resurse mari:
[JSFiddle cu prefixe browser][5]
li {
display: flex;
justify-content: center;
align-content: center;
flex-direction: column;
/* Column | row */
}
<ul>
<li>
<p>Some Text</p>
</li>
<li>
<p>A bit more text that goes on two lines</p>
</li>
<li>
<p>Even more text that demonstrates how lines can span multiple lines</p>
</li>
</ul>
Asta e de zerosixthree și vă permite să centru de nimic cu șase linii de CSS
Această metodă este't sprijinit în Internet Explorer 8 și mai mici.
[jsfiddle][7]
p {
text-align: center;
position: relative;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
<ul>
<li>
<p>Some Text</p>
</li>
<li>
<p>A bit more text that goes on two lines</p>
</li>
<li>
<p>Even more text that demonstrates how lines can span multiple lines</p>
</li>
</ul>
Un simplu și cross-browser abordare, utile și link-uri în marcată de răspuns sunt ușor depășite.
Cum să vertical și orizontal centru de text într-atât o lista neordonata și un div fără a recurge la JavaScript sau CSS linie înălțimi. Nu contează cât de mult text ai câștigat't trebuie să se aplice oricărei clase speciale pentru anumite liste sau divs (codul este același pentru fiecare). Aceasta funcționează pe toate browserele majore, inclusiv Internet Explorer 9, Internet Explorer 8, Internet Explorer 7, Internet Explorer 6, Firefox, Chrome, Mozilla și Safari. Există două foi de stil în cascadă (una pentru Internet Explorer 7 și alta pentru Internet Explorer 6) pentru a le ajuta de-a lungul datorită lor CSS limitări care browserele moderne don't au.
Ca am n't pasă prea mult pentru Internet Explorer 7/6 pentru ultimul proiect la care am lucrat, am folosit un ușor versiune simplificata (de exemplu, a eliminat lucruri care au făcut muncă în Internet Explorer 7 și 6). Ar putea fi util pentru altcineva...
[JSFiddle][10]
.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;
}
<ul>
<li>
<div class="outerContainer">
<div class="innerContainer">
<div class="element">
<p>
<!-- Content -->
Content
</p>
</div>
</div>
</div>
</li>
<li>
<div class="outerContainer">
<div class="innerContainer">
<div class="element">
<p>
<!-- Content -->
Content
</p>
</div>
</div>
</div>
</li>
</ul>
Este ușor cu display: flex
. Cu metoda de mai jos, textul în div
va fi centrat pe verticală:
div {
display: -webkit-flex;
display: flex;
align-items: center;
/* More style: */
height: 300px;
background-color: #888;
}
<div>
Your text here.
</div>
Și, dacă doriți, orizontal:
div {
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
/* More style: */
height: 300px;
background-color: #888;
}
<div>
Your text here.
</div>
Trebuie să vedem versiunea de browser care aveți nevoie; în old versions codul nu merge.
Nu utilizați următoarele vertical centru de elemente aleatorii cu ușurință:
<div style="height: 200px">
<div id="mytext">This is vertically aligned text within a div</div>
</div>
#mytext {
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
Această centre textul în div
la exact vertical mijlocul unei 200px-exterior ridicat div
. Rețineți că poate fi necesar să utilizați un browser prefix (cum ar fi `-webkit-în cazul meu) pentru a face acest lucru pentru browser-ul dumneavoastră.
Aceasta funcționează nu numai pentru text, dar, de asemenea, pentru alte elemente.
Puteți face acest lucru prin setarea afișajului pentru 'masa de celule' și aplicarea unei vertical-align: mijloc;
:
{
display: table-cell;
vertical-align: middle;
}
Acest lucru nu este însă susținută de toate versiunile de Internet Explorer în conformitate cu acest fragment l-am copiat de la http://www.w3schools.com/cssref/pr_class_display.asp fără permisiune.
Notă: valorile "inline-masa", "masa", "masa-caption", "masa de celule", "tabel-coloana", "tabel-coloana-grup", "tabel-rândul", "tabel-rândul-grup", și "mostenesc" nu sunt acceptate de Internet Explorer 7 și mai devreme. Internet Explorer 8 necesită o !DOCTYPE. Internet Explorer 9 susține valorile.
Următorul tabel prezintă permis de afișare a valorilor, de asemenea, de http://www.w3schools.com/cssref/pr_class_display.asp.
În aceste zile (nu ne't nevoie de Internet Explorer 6-7-8 mai) mi-ar folosi doar CSS display: de masă pentru această problemă (sau
display: flex`).
Tabel:
.vcenter {
display: table;
background: #eee; /* optional */
width: 150px;
height: 150px;
text-align: center; /* optional */
}
.vcenter > :first-child {
display: table-cell;
vertical-align: middle;
}
Acest lucru este meu Text
Flex:
.vcenter {
display: flex; /* <-- Here */
align-items: center; /* <-- Here */
justify-content: center; /* optional */
height: 150px; /* <-- Here */
background: #eee; /* optional */
width: 150px;
}
Acest lucru este meu text
Aceasta este (de fapt, a fost) meu preferat soluție pentru această problemă (simplu și foarte bine a browser-acceptate):
div {
margin: 5px;
text-align: center;
display: inline-block;
}
.vcenter {
background: #eee; /* optional */
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>
Aici este o soluție care funcționează cel mai bine pentru o singură linie de text.
Se poate lucra, de asemenea, pentru multi-căptușite text cu unele tweaking dacă numărul de linii este cunoscut.
.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 */
}
[Aici este o JSFiddle][1].
<!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>
Puteți alinia textul centru vertical în interiorul unui div folosind Flexbox.
<div>
<p class="testimonialText">This is the testimonial text.</p>
</div>
div {
display: flex;
align-items: center;
}
Puteți afla mai multe despre ea la Un Ghid Complet pentru Flexbox.
Verificați această soluție simplă:
<div class="block-title"><h3>I'm a vertically centered element</h3></div>
.block-title {
float: left;
display: block;
width: 100%;
height: 88px
}
.block-title h3 {
display: table-cell;
vertical-align: middle;
height: inherit
}
[JSFiddle][1]
Nu's-un mod mai simplu de a alinia vertical conținut fără a recurge la masă/masă de celule:
În ea am adăugat un invizibil (width=0) div că își asumă întreaga înălțime a containerului.
Se pare că funcționează în Internet Explorer și Firefox (versiunile mai recente). Am't verificați cu alte browsere
<div class="t">
<div>
everything is vertically centered in modern IE8+ and others.
</div>
<div></div>
</div>
Și, desigur, 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%;
}
Asta e cea mai curată soluție am găsit (Internet Explorer 9+) și adaugă un fix pentru "off de .5 pixel" problemă, prin utilizarea transforma stil` că alte răspunsuri au omis.
.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%);
}
O soluție simplă a unui element de a nu ști 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%);
}
Potrivit lui Adam R's răspunsul era pregătit o JSFiddle [exemplu][1] pentru a alinia textul în div:
<div class="cells-block">
text<br/>in the block
</div>
prin utilizarea 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 */
}
cu un alt [exemplu][2] și câteva explicații în un post pe blog.
Marja auto pe o grilă-element.
În mod similar pentru a Flexbox, aplicarea marjei auto pe o grilă-element de centre pe ambele axe:
.container {
display: grid;
}
.element {
margin: auto;
}
Utilizare:
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>
Cu acest truc, puteți alinia nimic, dacă nu't vreau pentru a face centrul adăugați "stânga:0" pentru a alinia la stânga.
Folosind flex, să fie atent cu diferențe în browsere' de redare.
Aceasta funcționează bine atât pentru Chrome și Internet Explorer:
.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>
Compara cu unul care funcționează doar cu 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>
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;
}