HTML Center Text - Cum Se Aliniază Vertical CSS Un Div

În lumea HTML și CSS, este vorba despre structura aspectului și distribuția elementelor. De obicei folosim HTML pentru a defini marcajul și structura, în timp ce CSS ne ajută să gestionăm stilul și alinierea elementelor.

În acest post vom învăța puțin despre diferitele moduri în care putem centra elemente HTML și gestiona alinierea verticală cu CSS.

Mai întâi vom învăța cum să aliniați textul cu CSS.

În continuare, vom prezenta cum să aliniați un div și orice alte elemente.

Și în cele din urmă vom învăța cum putem pune text și a div împreună într-un container.

Cum se centrează textul

Există multe modalități de a centra textul folosind CSS.

Utilizarea proprietății Float

Float este o modalitate ușoară de a alinia textul.

Pentru a plasa textul în partea dreaptă a aspectului, putem folosi pur și simplu right ca valoare pentru float.

Pentru a plasa textul pe partea stângă, folosim left, ca float:left. Uită-te la exemplul de mai jos:

  .right {
        float: right;
      }
     
      .left {
        float: left;
      }
// HTML

    <span class="right">Right</span>
    <span class="left">Left</span>

Pentru a centra textul folosind float putem folosi margin-left sau margin-right și reușește 50%, ca mai jos.

    .center {
    float: left;
    margin-left: 50%;
    }

/* HTML*/
<span class="center">Center</span>

Puteți afla mai multe despre utilizările Float aici.

Folosind Text-align

text-align este un mod mai convenabil și mai specific de a alinia textul. Ne permite să plasăm textul la center sau la left sau right laterală, după cum arată următorul exemplu:

.right {
text-align: right;
}

.left {
text-align: left;
}
.center {
text-align: center;
}
/* HTML */

<p class="right">Right</p>
<p class="center">Center</p>
<p class="left">Left</p>

Află mai multe despre text-align.

Cum să aliniați un `div`

Ei bine, există o mulțime de modalități de a face acest lucru.

La fel folosim Float pentru a alinia textul, îl putem folosi pentru a alinia un div element de asemenea.

Float face treaba, dar CSS ne oferă opțiuni mai bune, care sunt mai convenabile și elegante. Ai auzit de Flexbox? Sau css-grid?

Ei bine, aceste două metode oferă modalități foarte moderne de a vă alinia și de a lucra cu aspectul dvs. în CSS. Să analizăm mai detaliat Flexbox.

Flexbox

Flexbox oferă o modalitate simplă și simplă de a alinia un div – și este metoda mea preferată de până acum pentru a gestiona aspectele în CSS (îl folosesc zilnic).

Să ne uităm la ce am face Flexbox pentru a vedea cum funcționează recreând același exemplu ca mai sus.

Exemplul:

Codul:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Flexbox</title>
    <style>
      .container {
        display: flex;
      }
      .container div {
        width: 33%;
        height: 60px;
      }

      .left {
        background: yellow;
      }
      .right {
        background: red;
      }
      .center {
        background: lightblue;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="left">Left div</div>
      <div class="center">centered div</div>
      <div class="right">right div</div>
    </div>
  </body>
</html>

hai să o descompunem

Întotdeauna definim un div părinte folosind display:flex a aplica Flexbox. Așa că îi facem pe toți copiii divului în părinte div capabil să fie manipulat folosind Flexbox proprietăți.
flex-direction folosește row direcție în mod implicit, ceea ce înseamnă că elementele vor fi plasate vertical în container.
Cu justify-content proprietate pe care o putem alinia a divcopiii în direcții diferite, cum ar fi următorul exemplu:

.container{
 display: flex:
 justify-content:center /* flex-start, flex-end, space-between, space-evenly, space-around etc */

}

justify-content:center plasează elementele în centrul recipientului.
justify-content:flex-start pune elementele la începutul containerului din stânga.
justify-content:flex-end plasează elemente la capătul containerului pe partea dreaptă.
justify-content:space-around face ca elementele să se încadreze în container și pune un spațiu egal între toate elementele.
justify-content:space-evenly distribuie elementele în containerul părinte în mod egal cu același spațiu și aceeași lățime.

Exemplul de mai sus se aplică copiilor tuturor elementelor ca grup.

Imaginați-vă dacă am fi vrut să aliniați un singur div în interiorul containerului. Putem folosi oricând align-self pentru a alinia un singur element.

.container div{
 align-self:center /* can have: flex-start, or flex-end*/
}

Putem aplica același lucru unui text cu Flexbox ca în exemplul următor:


<style>
.right{
    display: flex;
    align-items: flex-end;
    flex-direction: column;
}
  
</style>
<div class="right">
<span>right div</span>
</div>

Acesta este un tweet excelent de la Julia Evans care ilustrează centrarea în CSS în general:

HTML Center Text Cum se aliniaza vertical CSS un — Tweet original aici

Învelire

Există multe modalități de a centra elementele în CSS. Și veți învăța întotdeauna lucruri noi în timp, pe măsură ce vă exersați din ce în ce mai mult.

Așadar, vă recomand să treceți câteva exemple din ceea ce ați învățat astăzi, astfel încât să rămână.