Centrarea lucrurilor este unul dintre cele mai dificile aspecte ale CSS.
Metodele în sine nu sunt de obicei greu de înțeles. În schimb, se datorează mai mult faptului că există atât de multe modalități de a centra lucrurile.
Metoda pe care o utilizați poate varia în funcție de elementul HTML pe care încercați să îl centrați sau dacă îl centrați orizontal sau vertical.
În acest tutorial, vom trece în revistă modul de centrare a diferitelor elemente orizontal, vertical și atât vertical, cât și orizontal.
Conţinut
Cum se centrează orizontal
Centrarea elementelor pe orizontală este în general mai ușoară decât centrarea pe verticală a acestora. Iată câteva elemente comune pe care poate doriți să le centrați pe orizontală și diferite moduri de a face acest lucru.
Cum se centrează textul cu proprietatea CSS Text-Align Center
Pentru a centra textul sau linkurile pe orizontală, utilizați doar text-align
proprietate cu valoarea center
:
<div class="container">
<p>Hello, (centered) World!</p>
</div>
p {
text-align: center;
}
Cum se centrează o divizare cu CSS Margin Auto
Folosiți stenograma margin
proprietate cu valoarea 0 auto
pentru a centra elemente la nivel de bloc, cum ar fi a div
orizontal:
<div class="container">
<div class="child"></div>
</div>
.child {
...
margin: 0 auto;
}
Cum se centrează un Div orizontal cu Flexbox
Flexbox este cel mai modern mod de a centra lucrurile pe pagină și face proiectarea de aspecte receptive mult mai ușoară decât era. Cu toate acestea, nu este pe deplin acceptat în unele browsere vechi, cum ar fi Internet Explorer.
Pentru a centra un element pe orizontală cu Flexbox, trebuie doar să aplicați display: flex
și justify-content: center
la elementul părinte:
<div class="container">
<div class="child"></div>
</div>
.container {
...
display: flex;
justify-content: center;
}
Cum se centrează vertical
Centrarea elementelor pe verticală fără metode moderne precum Flexbox poate fi o adevărată corvoadă. Aici vom trece în revistă câteva dintre metodele mai vechi pentru a centra mai întâi lucrurile pe verticală, apoi vă vom arăta cum să o faceți cu Flexbox.
Cum se centrează vertical o divizare cu poziționare absolută CSS și margini negative
Pentru o lungă perioadă de timp aceasta a fost modalitatea de a merge în centru pentru a centra lucrurile pe verticală. Pentru această metodă trebuie să cunoașteți înălțimea elementului pe care doriți să îl centrați.
Mai întâi, setați display
proprietatea elementului părinte pentru relative
.
Apoi pentru elementul copil, setați display
proprietate pentru absolute
și top
la 50%
:
<div class="container">
<div class="child"></div>
</div>
.container {
...
position: relative;
}
.child {
width: 50px;
height: 50px;
background-color: red;
/* Center vertically */
position: absolute;
top: 50%;
}
Dar asta chiar centrează vertical marginea superioară a elementului copil.
Pentru a centra cu adevărat elementul copil, setați margin-top
proprietate pentru -(half the child element's height)
:
.container {
...
position: relative;
}
.child {
width: 50px;
height: 50px;
background-color: red;
/* Center vertically */
position: absolute;
top: 50%;
margin-top: -25px; /* half this element's height */
}
Cum se centrează un Div pe verticală cu Transformare și Traducere
Dacă nu cunoașteți înălțimea elementului pe care doriți să îl centrați (sau chiar dacă știți), această metodă este un truc ingenios.
Această metodă este foarte similară cu metoda marjelor negative de mai sus. Seteaza display
proprietatea elementului părinte pentru relative
.
Pentru elementul copil, setați display
proprietate pentru absolute
și set top
la 50%
. Acum, în loc să utilizați o marjă negativă pentru a centra cu adevărat elementul copil, utilizați doar transform: translate(0, -50%)
:
<div class="container">
<div class="child"></div>
</div>
.container {
...
position: relative;
}
.child {
...
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
Rețineți că translate(0, -50%)
este stenogramă pentru translateX(0)
și translateY(-50%)
. De asemenea, ai putea scrie transform: translateY(-50%)
pentru a centra elementul copil pe verticală.
Cum se centrează vertical o divizare cu Flexbox
La fel ca centrarea lucrurilor pe orizontală, Flexbox face foarte ușor centrarea lucrurilor pe verticală.
Pentru a centra un element vertical, aplicați display: flex
și align-items: center
la elementul părinte:
<div class="container">
<div class="child"></div>
</div>
.container {
...
display: flex;
align-items: center;
}
Cum se centrează atât pe verticală, cât și pe orizontală
Cum se centrează o divizare verticală și orizontală cu poziționare absolută CSS și margini negative
Acest lucru este foarte similar cu metoda de mai sus pentru a centra un element pe verticală. La fel ca data trecută, trebuie să cunoașteți lățimea și înălțimea elementului pe care doriți să îl centrați.
Seteaza display
proprietatea elementului părinte pentru relative
.
Apoi puneți copilul display
proprietate pentru absolute
, top
la 50%
, și left
la 50%
. Aceasta centrează doar colțul din stânga sus al elementului copil pe verticală și orizontală.
Pentru a centra cu adevărat elementul copil, aplicați o marjă superioară negativă setată la jumătate din înălțimea elementului copil și o marjă stângă negativă setată la jumătate din lățimea elementului copil:
<div class="container">
<div class="child"></div>
</div>
.container {
...
position: relative;
}
.child {
width: 50px;
height: 50px;
background-color: red;
/* Center vertically and horizontally */
position: absolute;
top: 50%;
left: 50%;
margin: -25px 0 0 -25px; /* apply negative top and left margins to truly center the element */
}
Cum se centrează un Div pe verticală și pe orizontală cu Transformare și Traducere
Utilizați această metodă pentru a centra un element pe verticală și orizontală dacă nu îi cunoașteți dimensiunile exacte și nu puteți utiliza Flexbox.
Mai întâi, setați display
proprietatea elementului părinte pentru relative
.
Apoi, setați elementul copil display
proprietate pentru absolute
, top
la 50%
, și left
la 50%
.
În cele din urmă, utilizați transform: translate(-50%, -50%)
pentru a centra cu adevărat elementul copil:
<div class="container">
<div class="child"></div>
</div>
.container {
...
position: relative;
}
.child {
...
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Cum se centrează un Div pe verticală și pe orizontală cu Flexbox
Flexbox este cel mai simplu mod de a centra un element atât pe verticală, cât și pe orizontală.
Aceasta este într-adevăr doar o combinație a celor două metode Flexbox anterioare. Apoi aplică justify-content: center
și align-items: center
pentru a centra elementele copilului orizontal și vertical:
<div class="container">
<div class="child"></div>
</div>
.container {
...
display: flex;
justify-content: center;
align-items: center;
}
Asta este tot ce trebuie să știi pentru a te concentra pe cei mai buni dintre ei. Acum mergeți mai departe și centrați toate lucrurile.
#Cum #să #centrați #orice #CSS #Aliniați #Div #Text #și #multe #altele
Cum să centrați orice cu CSS – Aliniați un Div, Text și multe altele