Centra el text en HTML

Autora: Tamara Smith
Data De La Creació: 28 Gener 2021
Data D’Actualització: 1 Juliol 2024
Anonim
how to center text with html and css
Vídeo: how to center text with html and css

Content

Aquest wikiHow us ensenya a centrar text en un lloc web HTML. Utilitzem CSS (Cascading Style Sheets o fulls d’estil). Solíem centrar-nos en HTML mitjançant el fitxer centre>, però això ja no funciona a la majoria de navegadors.

Per trepitjar

Mètode 1 de 2: utilitzar CSS

  1. Obriu el fitxer de text on descriviu els vostres estils. Ara el centre>etiqueta ja no s'utilitza, creeu un element nou en aquest fitxer que centri el text en determinades àrees del vostre document HTML. Si no teniu cap fitxer CSS separat, els codis es troben a la part superior del document HTML entre les etiquetes "style>" i "/ style>".
    • Com el estil>- i / style>les etiquetes encara no hi són, les podeu posar directament a sota de cos>etiqueta de la següent manera:
    • ! DOCTYPE html> html> body> style> / style>

  2. Creeu una classe que centri el text. El div>tag indica al vostre document HTML a quina secció específica pertany aquesta classe. Escriviu el següent entre les etiquetes "estil" i assegureu-vos de fer doble clic ↵ Introduïu després de la primera línia:

      div.a {}

  3. Afegiu el fitxer alinear textpropietat. Tipus text-align: centre; entre els claudàtors del div.a-secció. Ara la "capçalera" té aquest aspecte:

      ! DOCTYPE html> html> body> style> div.a {text-align: center; } / style>

  4. Afegiu-ne la correcta divetiqueta al text que voleu centrar. Ho feu a través de div>etiqueta a sobre d’aquest text i tanqueu-lo amb un / div>etiqueta a sota d’aquest text. Per exemple, si voleu centrar un títol i el paràgraf que hi ha a sota, té el següent aspecte:

      div> h1> Benvingut al meu lloc web / h1> p> Aquest lloc web serveix principalment per proporcionar informació sobre coses. / p> / div>

  5. Utilitzar el div.aetiqueta per centrar altres elements. Quan vulgueu centrar un altre element, com ara el contingut entre les etiquetes p> / p> i h2> / h2>), escriviu div> per a aquest element i / div> després. Com que ja heu definit la "div.a" com a codi CSS de centratge, aquests elements ara també estan centrats.

      estil> div.a {text-align: centre; } / style> div> h2> Les donacions són benvingudes / h2> p> si us plau / p> / div>

  6. Consulteu el vostre document. Tot i que el text de la vostra pàgina web és, per descomptat, diferent, hauria de ser semblant a aquest:

      ! DOCTYPE html> html> body> style> div.a {text-align: center; } / style> div> h1> Benvingut al meu lloc web / h1> p> Aquest lloc web serveix principalment per proporcionar informació sobre coses. / p> / div> div> h2> Les donacions són benvingudes / h2> p> si us plau / p> / div> / body> / html>

Mètode 2 de 2: utilitzar l'etiqueta "centre" en HTML

  1. Obriu el document HTML. Aquest mètode descriu com aconseguir l’obsolet centre>etiqueta. És possible que aquest mètode funcioni en diversos navegadors, però és millor no confiar-hi massa.
  2. Cerqueu el text que vulgueu centrar. Desplaceu-vos cap avall fins que trobeu el títol, el paràgraf o qualsevol altre text que vulgueu centrar.
  3. Col·loqueu l'etiqueta "central" a banda i banda del text. El codi té aquest aspecte centre> text / centre>. Aquí, "text" és el text que s'ha de centrar. Si hi ha altres etiquetes en aquest text, com ara "p> / p>" abans d'un paràgraf, col·loqueu les etiquetes "al centre" fora de les etiquetes existents.

      centre> h1> Benvingut al meu lloc web / h1> / centre> centre> Posa't còmode! / centre>

  4. Comproveu el vostre document HTML. Hauria de ser semblant a això:

      ! DOCTYPE html> html> body> h1> centre> Benvingut al meu lloc web / centre> / h1> centre> Feu-ho més fàcil! / Centre> p1> Aquest lloc web serveix principalment per proporcionar informació sobre coses. / P1> / body > / html>