Centrant el text verticalment en un div mitjançant CSS

Alice Dupont
Dissabte, 13 de juliol de 2024 a les 20:56:54
CSS

Centreu el text verticalment dins d'un div amb CSS

Alinear el text verticalment dins d'un div pot ser un repte comú en el disseny web. Garantir que el text estigui perfectament centrat pot millorar l'estètica i la llegibilitat del vostre contingut.

En aquest article, explorarem diversos mètodes per aconseguir centrar verticalment el text dins d'un div mitjançant CSS. Començarem amb un exemple senzill i després aprofundirem en tècniques més avançades per garantir la compatibilitat entre diferents navegadors i dispositius.

Comandament Descripció
display: flex; Defineix un contenidor flexible, que permet l'ús del disseny de flexbox.
justify-content: center; Centra horitzontalment els elements flexibles dins del contenidor flexible.
align-items: center; Centra verticalment els elements flexibles dins del contenidor flexible.
display: grid; Defineix un contenidor de quadrícula, que permet l'ús del disseny de quadrícula.
place-items: center; Centra els elements tant horitzontalment com verticalment dins d'un contenidor de quadrícula.
display: table; Defineix un element com una taula, permetent que s'apliquin les propietats de disseny de la taula.
display: table-cell; Defineix un element com a cel·la de taula, activant les propietats d'alineació vertical.
vertical-align: middle; Centra verticalment el contingut dins d'un element de cel·la de taula.
line-height: 170px; Estableix l'alçada de la línia igual a l'alçada del contenidor per centrar verticalment el text.

Tècniques per centrar text verticalment amb CSS

En el primer exemple de guió, fem servir per definir un contenidor flexible. Això permet l'ús de propietats de disseny de Flexbox. Per fixació i , podem centrar horitzontalment i verticalment el text dins del

element. Aquest mètode és molt eficaç i senzill d'implementar, per la qual cosa és una opció popular per al disseny web modern. Flexbox és especialment útil per la seva capacitat de resposta i facilitat d'alineació, que permet als desenvolupadors crear dissenys que s'adaptin bé a diferents mides i orientacions de pantalla.

El segon exemple de script utilitza el disseny de quadrícula CSS mitjançant l'ús . Per fixació , el text es centra tant horitzontalment com verticalment dins del contenidor de la quadrícula. CSS Grid ofereix un sistema més potent i flexible per dissenyar dissenys web en comparació amb els mètodes tradicionals. Proporciona la capacitat de crear dissenys complexos i sensibles amb facilitat. El L'ordre és una manera concisa d'aconseguir el centratge vertical i horitzontal, simplificant el codi i millorant la llegibilitat.

Tècniques CSS avançades per al centratge vertical

En el tercer script, utilitzem el mètode de visualització de la taula. Configuració al contenidor i sobre un pseudoelement creat amb ens permet utilitzar el vertical-align: middle; propietat. Aquest mètode imita el comportament de les cel·les de la taula, cosa que permet centrar verticalment el contingut. Tot i que aquest enfocament s'utilitza amb menys freqüència en el disseny web modern, pot ser útil per mantenir la compatibilitat amb navegadors antics o quan es tracta de codi heretat. Proporciona una manera fiable de centrar el contingut sense dependre de sistemes de disseny més nous.

El quart exemple de script utilitza el propietat. Configurant el igual a l'alçada del contenidor, el text es centra verticalment. Aquesta tècnica és senzilla i eficaç per a text d'una sola línia. Tanmateix, pot ser que no sigui adequat per a text de diverses línies o contingut dinàmic on l'alçada del contenidor pot canviar. Malgrat les seves limitacions, el El mètode és una solució ràpida i senzilla per centrar text verticalment en escenaris senzills.

Ús de Flexbox per al centratge vertical

CSS Flexbox

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div id="box">Lorem ipsum dolor sit</div>

Ús de la quadrícula per al centratge vertical

Quadrícula CSS

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: grid;
  place-items: center;
}
<div id="box">Lorem ipsum dolor sit</div>

Ús de la pantalla de taula per al centratge vertical

Visualització de la taula CSS

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  display: table;
}
#box::before {
  content: "";
  display: table-cell;
  vertical-align: middle;
}
#box > div {
  display: inline-block;
  vertical-align: middle;
}
<div id="box"><div>Lorem ipsum dolor sit</div></div>

Ús de l'alçada de línia per al centratge vertical

Alçada de línia CSS

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  line-height: 170px;
  text-align: center;
}
<div id="box">Lorem ipsum dolor sit</div>

Explorant la transformació CSS ​​per al centratge vertical

Un altre mètode eficaç per centrar verticalment el text dins d'a està utilitzant el CSS propietat. En combinar amb transform: translateY(-50%);, podem aconseguir una alineació vertical precisa. En primer lloc, el està configurat a per actuar com a referent. A continuació, un element fill amb es col·loca a la part superior del 50% del contenidor principal. Finalment, sol·licitant transform: translateY(-50%); mou l'element cap amunt la meitat de la seva pròpia alçada, centrant-lo perfectament verticalment.

Aquest mètode proporciona una gran flexibilitat i funciona bé per a diversos tipus de contingut, inclosos text i imatges. És especialment útil quan es tracta de contingut dinàmic, ja que l'efecte de centrat es manté constant independentment de l'alçada del contingut. A més, combinant amb altres propietats CSS permet dissenys de maquetació més complexos i creatius. Tot i que aquest enfocament requereix una mica més de codi en comparació amb Flexbox o Grid, ofereix un control precís sobre el posicionament dels elements.

  1. Quina és la manera més fàcil de centrar verticalment el text en un div?
  2. Utilitzant amb i sovint és el mètode més fàcil i eficaç.
  3. Com centreu verticalment el text als navegadors antics?
  4. Utilitzant el mètode de visualització de la taula amb i pot ajudar a aconseguir el centratge vertical en navegadors antics.
  5. Es pot utilitzar CSS Grid per centrar el text verticalment?
  6. Sí, CSS Grid pot centrar el text verticalment mitjançant i .
  7. És possible centrar verticalment el text de diverses línies?
  8. Sí, amb Flexbox o CSS Grid es pot centrar fàcilment text de diverses línies verticalment dins d'un contenidor.
  9. Com centreu verticalment el text amb una alçada de contenidor coneguda?
  10. Podeu configurar el propietat que coincideixi amb l'alçada del contenidor, centrant el text de manera efectiva.
  11. Què passa si l'alçada del contenidor és dinàmica?
  12. Utilitzant Flexbox, Grid o el La propietat garanteix un centratge vertical consistent, fins i tot amb alçades dinàmiques dels contenidors.
  13. Hi ha algun inconvenient per utilitzar-lo ?
  14. Tot i que és efectiu, requereix que els pares ho tinguin i pot ser una mica més complex d'implementar en comparació amb Flexbox o Grid.
  15. Com centreu verticalment el text en un disseny responsiu?
  16. L'ús de Flexbox o CSS Grid és molt recomanable per als dissenys sensibles, ja que s'adapten bé a diferents mides i orientacions de pantalla.

Aconseguir el centratge vertical del text dins d'un div es pot aconseguir mitjançant diversos mètodes efectius. Tècniques modernes com Flexbox i Grid ofereixen la major flexibilitat i facilitat d'implementació. Els mètodes més antics, com ara la visualització de la taula i l'alçada de la línia, encara poden ser útils en casos concrets. En comprendre i aplicar aquests diferents enfocaments, els desenvolupadors poden assegurar-se que el seu contingut és visualment atractiu i s'alinea correctament en diversos dispositius i navegadors.