Centreu imatges, text i elements de bloc en crear llocs web
Si esteu aprenent a construir llocs web , un dels trucs més freqüents que haurà de dominar és com centrar elements a la finestra del navegador. Això podria significar centrar una imatge a la pàgina, o podria ser un text que justifica el centre com titulars com a part del disseny.
La manera correcta d'aconseguir aquest aspecte visual d'imatges centrades o de text o fins i tot la vostra pàgina web sencera és mitjançant l'ús de fulls d'estil en cascada (CSS) . La majoria de les propietats per centrar han estat en CSS des de la versió 1.0, i funcionen molt bé amb CSS3 i navegadors web moderns .
Com molts aspectes del disseny web, hi ha diverses maneres d'utilitzar CSS per centrar elements en una pàgina web. Fem una ullada a algunes maneres diferents d'utilitzar CSS per aconseguir aquest aspecte visual.
Sobre Descripció general de l'ús de CSS per centrar elements en HTML
Centrar-se amb CSS pot ser un repte per començar a dissenyar web perquè hi ha tantes maneres diferents d'aconseguir aquest estil visual. Tot i que la varietat de mètodes pot ser desenvolupadors web agradables o experimentats que saben que no totes les tècniques funcionen en tots els elements, això pot ser un gran desafiament per als nous professionals de la xarxa, ja que l'àmplia varietat de mètodes significa que necessiten saber quan utilitzar aquest enfocament. El millor que cal fer és comprendre uns quants enfocaments. A mesura que comença a utilitzar-los, aprendrà quin mètode funciona millor en quins casos.
A un nivell alt, podeu utilitzar CSS per:
- Centre de text
- Centreu un element de nivell de bloc (com una divisió)
- Centreu una imatge
- Centra verticalment un bloc o una imatge
Fa molts (molts) anys, els dissenyadors web podrien utilitzar l'element
Centrat de text amb CSS
El més senzill de centrar-se en una pàgina web és el text. Només hi ha una propietat d'estil que heu de saber per fer-ho: alineació de text. Agafeu l'estil CSS següent, per exemple:
p.center {text-align: center; }
Amb aquesta línia de CSS, cada paràgraf escrit amb la classe central se centrarà horitzontalment dins del seu element primari. Per exemple, si el paràgraf estava dins d'una divisió, el que significa que era un nen d'aquesta divisió, es centraria horitzontalment a l'interior del
Aquí teniu un exemple d'aquesta classe aplicada al document HTML:
Aquest text està centrat.
Quan creeu text amb la propietat alinear text, recordeu que estarà centrat dins del seu element contenidor i no necessàriament centrat a la pàgina completa. Recordeu també que el text justificat al centre pot ser difícil de llegir per a grans blocs de contingut, de manera que utilitzeu aquest estil amb moderació. Les capçaleres i els petits blocs de text, com ara text teaser per a un article o un altre contingut, sovint són fàcils de llegir i bé quan estan centrats, però els blocs més grans de text, com l'article complet en si, serien difícils de consumir si el contingut era completament centrat justificat. Recordeu que la llegibilitat sempre és clau quan es tracta de text del lloc web.
Centrar blocs de contingut amb CSS
Els blocs són elements a la vostra pàgina que tenen un ample definit i s'estableixen com un element de nivell de bloc. Sovint, aquests blocs es creen utilitzant l'element HTML
div.center {
marge: 0 automàtic;
ample: 80em;
}
Aquesta taquigrafia CSS per a la propietat del marge establia els marges superior i inferior a un valor de 0, mentre que l'esquerra i la dreta usarien "auto". Això necessàriament pren qualsevol espai disponible i el divideix uniformement entre els dos costats de la finestra de la finestra de visualització, centrant efectivament l'element de la pàgina.
Aquí s'aplica a l'HTML:
però el text que hi ha a l'interior està alineat a l'esquerra.
Mentre el bloc tingui un ample definit, es centrarà dins de l'element que conté. El text que conté aquest bloc no se centrarà en ell, però es justificarà a l'esquerra. Això és degut a que el text queda justificat per defecte als navegadors web. Si volíeu que el text estigués centrat també, podríeu utilitzar la propietat align-aligned de text que hàgim tractat anteriorment juntament amb aquest mètode per centrar la divisió.
Centrat d'imatges amb CSS
Tot i que la majoria dels navegadors mostraran imatges centrades en la mateixa propietat de text align que ja hem examinat el paràgraf, no és una bona idea confiar en aquesta tècnica, ja que el W3C no recomana. Com que no és recomanable, sempre hi ha la possibilitat que les futures versions dels navegadors poguessin optar per ignorar aquest mètode.
En lloc d'utilitzar text alinear per centrar una imatge, haureu de dir explícitament al navegador que la imatge és un element de nivell de blocatge. D'aquesta manera, podeu centrar-lo com ho faria en qualsevol altre bloc. Aquí teniu el CSS perquè això succeeixi:
img.center {
visualització: bloc;
margin-left: auto;
marge-dret: automàtic;
}
I aquí teniu l'HTML que per a la imatge que ens agradaria centrar:
També podeu centrar els objectes utilitzant CSS en línia (vegeu a continuació), però aquest mètode no es recomana ja que afegeix estils visuals al vostre marcat HTML. Recordeu, volem separar l'estil i l'estructura, de manera que afegir estils CSS al vostre codi HTML amb la separació d'aquesta separació i, com a tal, cal evitar sempre que sigui possible.
Elements de centratge verticalment amb CSS
Centrar objectes verticalment sempre ha estat difícil en el disseny web, però amb l'alliberament del mòdul de disseny de quadres flexibles de CSS a CSS3, ara hi ha una manera de fer-ho.
L'alineació vertical funciona de manera similar a l'alineació horitzontal que es cobreix a dalt La propietat CSS s'alinea verticalment amb el valor mig.
.centre {
vertical-align: middle;
}
L'inconvenient d'aquest enfocament és que no tots els navegadors són compatibles amb CSS FlexBox, encara que cada vegada hi ha més informació sobre aquest nou mètode de disseny de CSS. De fet, tots els navegadors moderns d'avui són compatibles amb aquest estil CSS. Això significa que les vostres soles preocupacions amb Flexbox serien una versió molt més antiga del navegador.
Si teniu problemes amb navegadors antics, el W3C us recomana que centreu el text verticalment en un contenidor usant el mètode següent:
- Col·loqueu els elements per centrar-se dins d'un element que contingui, com ara un div.
- Establiu una alçada mínima a l'element que conté.
- Declareu que conté elements com a cel·la de taula.
- Estableix l'alineació vertical a "mig".
Per exemple, aquí teniu el CSS:
.centre {
min-height: 12em;
pantalla: cel·la de taula;
vertical-align: middle;
}
I aquí teniu l'HTML:
Aquest text està centrat verticalment al quadre.
Vertical Centering i versions anteriors d'Internet Explorer
Hi ha algunes maneres d'obligar a Internet Explorer (IE) a centrar-se i després utilitzar comentaris condicionals perquè només IE vegi els estils, però són una mica detallats i lletjos. La bona notícia és que amb la recent decisió de Microsoft d'abandonar el suport per a versions anteriors d'IE, els navegadors que no siguin compatibles haurien de sortir aviat, facilitant que els dissenyadors web utilitzin enfocaments de disseny moderns com CSS FlexBox que faran que tots els formats CSS, no només centrat, més fàcil per a tots els dissenyadors web.