Centrar imaxes, texto e elementos de bloqueos ao crear sitios web
Se estás aprendendo a construír sitios web , un dos trucos máis comúns que terás que dominar é como centrar elementos na xanela do navegador. Isto podería significar centrar unha imaxe na páxina, ou podería ser un texto que xustifique o centro como títulos como parte do deseño.
A forma correcta de realizar este aspecto visual de imaxes ou textos centrados ou incluso a súa páxina web completa é usando Follas de estilo en cascada (CSS) . A maioría das propiedades para centrar foron en CSS desde a versión 1.0 e funcionan ben con CSS3 e os modernos navegadores web .
Como moitos aspectos do deseño web, hai varias formas de usar CSS para centrar elementos nunha páxina web. Vexamos algunhas formas diferentes de usar CSS para conseguir este aspecto visual.
En vista xeral sobre o uso de CSS para centrar elementos en HTML
O centrado con CSS pode ser un desafío para comezar a deseñar os web porque hai moitas formas diferentes de realizar este estilo visual. Aínda que a variedade de métodos poden ser desenvolvedores web simpáticos ou experimentados que saben que non todas as técnicas funcionan en cada elemento, isto pode ser un desafío terrible para os profesionais máis novos da rede xa que a gran variedade de métodos significa que precisan saber cando usar esa aproximación. O mellor que hai que facer é comprender algunhas aproximacións. Cando comece a usalos, vai saber que método funciona mellor en que instancias.
Nun alto nivel, pode usar CSS para:
- Texto central
- Centra un elemento de nivel de bloque (como unha división)
- Centra unha imaxe
- Centra verticalmente un bloque ou unha imaxe
Fai moitos (moitos) anos, os diseñadores web poderían usar o elemento
Centrado de texto con CSS
O máis fácil de centrar nunha páxina web é o texto. Só hai unha propiedade de estilo que precisa saber para facer isto: alinear texto. Tome o estilo CSS a continuación, por exemplo:
p.center {text-align: center; }
Con esta liña de CSS, cada parágrafo escrito coa clase central estaría centrado horizontalmente dentro do seu elemento primario. Por exemplo, se o parágrafo estaba dentro dunha división, o que significa que era un fillo desta división, estaría centrado horizontalmente dentro do
Aquí tes un exemplo desta clase aplicada no documento HTML:
Este texto está centrado.
Ao centrar o texto coa propiedade de aliñamento de texto, lembre que estará centrada dentro do seu elemento que contén e non se centra necesariamente na propia páxina completa. Lembre tamén que o texto xustificado polo centro pode ser difícil de ler para grandes bloques de contido, polo tanto, use este estilo con moderación. Os titulares e pequenos bloques de texto, como o texto teaser para un artigo ou outro contido, adoitan ser fáciles de ler e finalizar cando están centrados, pero os bloques de texto máis grandes, como o artigo completo en si, serían reto de consumir se o contido estaba completamente centrado xustificado. Lembre, a lexibilidade sempre é clave cando se trata de texto do sitio web.
Centrado de bloques de contido con CSS
Os bloques son elementos da túa páxina que teñen un ancho definido e están establecidos como un elemento de bloque. Moitas veces, estes bloques créanse usando o elemento HTML
div.center {
marxe: 0 auto;
ancho: 80em;
}
Esta taquigrafia CSS para a propiedade da marxe fixaría as máximas superior e inferior nun valor de 0, mentres que a esquerda e a dereita usarían "auto". Isto esencialmente leva calquera espazo dispoñible e divídese de xeito uniforme entre os dous lados da xanela de visualización, centrando o elemento na páxina.
Aquí aplícase no HTML:
pero o texto dentro del queda aliñado.
Mentres o bloque teña un ancho definido, centrábase dentro do elemento que contén. O texto contido nese bloque non estará centrado dentro del, pero quedará xustificado á esquerda. Isto é porque o texto está xustificado por defecto nos navegadores web. Se quixese tamén centrar o texto, podería empregar a propiedade de aliñamento de texto que cubrimos previamente xunto con este método para centrar a división.
Centrado de imaxes con CSS
Aínda que a maioría dos navegadores mostrarán imaxes centradas usando a mesma propiedade de aliñamento de texto que xa miramos para o parágrafo, non é unha boa idea contar con esa técnica xa que o W3C non recomenda. Xa que non se recomenda, sempre hai posibilidade de que futuras versións de navegadores poidan optar por ignorar este método.
En vez de usar o alinear de texto para centrar unha imaxe, debería dicir explícitamente ao navegador que a imaxe é un elemento de nivel de bloque. Deste xeito, podes centralo como farías con calquera outro bloque. Aquí está o CSS para que isto suceda:
img.center {
mostrar: bloque;
marxe esquerda: auto;
marxe dereita: auto;
}
E aquí está o HTML que para a imaxe que nos gustaría centrar:
Tamén pode centrar obxectos usando CSS en liña (consulte a continuación), pero este enfoque non se recomenda xa que engade estilos visuais no seu marcado HTML. Lembra que desexamos separar o estilo e a estrutura, polo que engadir estilos CSS ao seu código HTML que rompen esa separación e, como tal, evitaranse sempre que sexa posible.
Elementos centrados verticalmente con CSS
Centrar obxectos verticalmente sempre foi un desafío no deseño web, pero co lanzamento do módulo de deseño de caixa flexible CSS en CSS3, agora hai unha forma de facelo.
O aliñamento vertical funciona de forma similar á alineación horizontal cuberta anteriormente. A propiedade CSS está verticalmente aliñada co valor do medio.
.vcenter {
aliñamento vertical: medio;
}
A desvantaxe desta visión é que non todos os navegadores admiten CSS FlexBox, aínda que máis e máis están por chegar a este novo método de deseño de CSS. De feito, todos os navegadores modernos hoxe admiten este estilo CSS. Isto significa que as túas únicas preocupacións con Flexbox serían moito máis antigas.
Se ten problemas cos navegadores máis antigos, o W3C recomenda que centra o texto vertical nun contenedor usando o seguinte método:
- Coloca os elementos para centrarse dentro dun elemento que contén, como un div.
- Establecer unha altura mínima no elemento que contén.
- Declare que o elemento que contén como unha cela de táboa.
- Establece o aliñamento vertical en "medio".
Por exemplo, aquí está o CSS:
.vcenter {
min-height: 12em;
mostrar: table-cell;
aliñamento vertical: medio;
}
E aquí está o HTML:
Este texto está centrado verticalmente na caixa.
Centrado vertical e versións anteriores de Internet Explorer
Existen algunhas formas de forzar o centro de Internet Explorer (IE) e usar comentarios condicionais para que só o IE vexa os estilos, pero son un pouco detallados e feos. A boa noticia é que coa recente decisión de Microsoft de abandonar o soporte para versións máis antigas de IE, estes navegadores non compatibles deberían estar en marcha pronto, facilitando aos diseñadores web o uso de formulacións modernas de deseño como CSS FlexBox que fará que todos os esquemas CSS, non só centrado, máis fácil para todos os diseñadores web.