Com centrar una imatge en HTML

Autora: Mark Sanchez
Data De La Creació: 6 Gener 2021
Data D’Actualització: 1 Juliol 2024
Anonim
tutorial html y css | propiededades background y como ajustar el fondo al navegador
Vídeo: tutorial html y css | propiededades background y como ajustar el fondo al navegador

Content

Atribut alinear etiqueta html> ha quedat obsolet des de HTML5. Tot i que aquest atribut encara funciona a la majoria de navegadors web, es recomana alinear imatges mitjançant fulls d’estil en cascada (CSS). En aquest article, us mostrarem com centrar les imatges mitjançant CSS i l’etiqueta obsoleta. alinear.

Passos

Mètode 1 de 2: CSS (recomanat)

  1. 1 Afegiu codi HTML per a la imatge. Utilitzarà fulls d’estil en cascada (CSS) per alinear la imatge, però haureu de col·locar-la a la pàgina mitjançant HTML. A continuació es mostra un exemple d’ús de l’etiqueta img> per inserir una imatge al vostre codi:

    img src = "dog.webp" alt = "aquesta és una foto d'un gos">

    • En lloc de gos.webp substituïu el nom del fitxer d'imatge i després de "alt" introduïu la descripció de la imatge. Significat centre per a "classe" no canvieu, perquè crearà una classe CSS amb aquest nom.
  2. 2 Cerqueu el codi CSS. Si el vostre lloc té un fitxer CSS independent, obriu-lo. Si no, és probable que el CSS es trobi a la part superior del fitxer HTML, dins de les etiquetes cap>... Desplaceu-vos fins a la part superior del fitxer per trobar etiquetes estil> / estil>.
    • Si les etiquetes estil> / estil> no, afegiu-los. Llegiu aquest article per obtenir més informació.
  3. 3 Afegiu CSS per alinear la imatge. En lloc de "50%", podeu introduir un valor diferent perquè la imatge aparegui a la pàgina. No podreu centrar la imatge amb un valor de "100%", de manera que aquest número hauria de ser diferent.

    .center {display: block; marge-esquerra: automàtic; marge-dreta: automàtic; amplada: 50%; }

  4. 4 Deseu els canvis. Deseu el fitxer HTML i el fitxer CSS (si n’hi ha). Això centrarà la imatge.
    • També dins de les etiquetes img> pot afegir per centrar altres imatges.

Mètode 2 de 2: l'atribut "align" en HTML

  1. 1 Creeu un paràgraf nou. Tot i que aquest mètode de centratge d’imatges ha quedat obsolet, encara funciona en molts navegadors. Tot i això, es recomana utilitzar CSS per mantenir el lloc funcional quan els navegadors deixen de suportar l'atribut especificat. Recordeu que l'atribut alinear centrarà la imatge només dins de l'element que l'envolta (per exemple, dins de les etiquetes p> / p> o bé div> / div>). Com a exemple, al fitxer HTML, afegirem un paràgraf nou p> en una línia separada.
  2. 2 Afegiu codi HTML per a la imatge. Introduïu el següent codi després de l'etiqueta p>... Utilitzeu aquest exemple com a guia:

    p> img src = "dog.webp" alt = "picture" align = "middle">

    • En lloc de gos.webp substituïu el nom del fitxer d'imatge i després de "alt" introduïu la descripció de la imatge.
    • L'atribut central indica al navegador que mostri la imatge al centre de la pàgina.
  3. 3 Tanqueu l'etiqueta de paràgraf. Per fer-ho, afegiu / p> després de l'etiqueta d'imatge. El codi acabat hauria de ser semblant a aquest:

    p> img src = "dog.webp" alt = "picture" align = "middle"> / p>

  4. 4 Deseu els canvis. Això centrarà la imatge.