Existen muchas formas de hacerlo, pero la que me parece la m\u00e1s sencilla\u00a0 es la que proponen en este post del blog lamateporunyogur<\/em>.<\/a><\/p>\n En la hoja de estilo, debemos crear una clase para cada alineaci\u00f3n de imagen. img.centrado {<\/p>\n display: block;<\/p>\n margin: auto;<\/p>\n }<\/p>\n Y en el archivo HTML tendremos que escribir, cada vez que ponemos una imagen:<\/p>\n <img class=’centrado’ src=’archivo de imagen’ alt=’texto alternativo’><\/p>\n \u00bfC\u00f3mo usar im\u00e1genes de fondo para escribir sobre ellas?<\/strong><\/p>\n Muchas veces queremos incluir una imagen en nuestra p\u00e1gina, pero no porque tenga una foto o un dibujo interesante sino porque queremos escribir dentro de ella, como en estos ejemplos:<\/p>\n Lo que se hizo en los tres casos es exactamente lo mismo:<\/p>\n -En la hoja de estilo se cre\u00f3 una clase cuyo fondo tiene la imagen, y al texto se le alteraron los tama\u00f1os (altura\/height<\/em>, ancho\/width<\/em>) y la alineaci\u00f3n para que coincidan con el centro de la imagen:<\/p>\n p.comentario {<\/p>\n height: 5.5em;<\/p>\n width: 7.3em;<\/p>\n text-align: center;<\/p>\n vertical-align: middle;<\/p>\n line-height: 5.5em;<\/p>\n color: #ffffff;<\/p>\n background-image: URL(‘nube.jpg’);<\/p>\n }<\/p>\n -En el archivo HTML simplemente se us\u00f3 la clase “comentario” para escribir un peque\u00f1o texto:<\/p>\n <p class=”comentario”>\u00a1Hola!<\/p><\/p>\n No debemos olvidar nunca que las im\u00e1genes que est\u00e1n en el archivo HTML tienen que tener un texto alternativo que la reemplace en su funci\u00f3n <\/strong>(por ejemplo, si la imagen tiene un enlace, el texto alternativo debe decir “ir a tal direcci\u00f3n”), y una descripci\u00f3n larga (<\/strong>longdesc=”archivo.html”<\/em>) en caso de tratarse de una imagen que contenga informaci\u00f3n. En cambio, cuando una imagen no transmite informaci\u00f3n, podemos ponerla como fondo de un DIV<\/strong>.<\/p>\n Otros posts de BETA Weblog<\/em> sobre accesibilidad y CSS:<\/p>\n M\u00e1s sobre CSS: Float y Clear<\/a><\/p>\n \u00bfC\u00f3mo se ve mi sitio en otros sistemas?<\/a><\/p>\n Sombras nada m\u00e1s\u2026 o \u00bfsombras en el texto de una web accesible?<\/a><\/p>\n Ayuda para crear hojas de estilo<\/a><\/p>\n C\u00f3mo saber el c\u00f3digo de un color<\/a><\/p>\n C\u00f3mo saber si tu sitio es accesible<\/a><\/p>\n <\/p>\n","protected":false},"excerpt":{"rendered":" Cuando uno empieza a hacer p\u00e1ginas web accesibles, empiezan a surgir algunas preguntas cuya respuesta no es tan sencilla. \u00bfC\u00f3mo centrar una imagen usando CSS? Existen muchas formas de hacerlo, pero la que me parece la m\u00e1s sencilla\u00a0 es la que proponen en este post del blog lamateporunyogur. En la hoja de estilo, debemos crear … Continuar leyendo “Im\u00e1genes en CSS”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-560","post","type-post","status-publish","format-standard","hentry","category-educacion-tecnologia"],"_links":{"self":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts\/560","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/comments?post=560"}],"version-history":[{"count":0,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts\/560\/revisions"}],"wp:attachment":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/media?parent=560"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/categories?post=560"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/tags?post=560"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\nPor ejemplo, para im\u00e1genes centradas, en el CSS podemos escribir esto:<\/p>\n![\"Texto](\"http:\/\/irisfernandez.com.ar\/betaweblog\/wp-content\/uploads\/2009\/04\/texto_en_globos_css.jpg\")
![\"Texto](\"http:\/\/irisfernandez.com.ar\/betaweblog\/wp-content\/uploads\/2009\/04\/texto_en_nubes_css.jpg\")
![\"Texto](\"http:\/\/irisfernandez.com.ar\/betaweblog\/wp-content\/uploads\/2009\/04\/texto_en_papel_css.jpg\")
<\/p>\n