Vycentrujte prvek na stránku css. Zarovnání pomocí "roztahování". CSS - Vertical Alignment

Od autora: Vítám vás opět na stránkách našeho blogu. V dnešním článku bych chtěl mluvit o různých technikách zarovnání, které lze aplikovat jak na bloky, tak na jejich obsah. Zejména jak zarovnávat bloky v css a také zarovnávání textu.

Zarovnání bloků do středu

V CSS je centrování bloku snadné. Tato technika je pro mnohé nejznámější, ale rád bych o ní mluvil právě teď. To znamená zarovnání vodorovně na střed vzhledem k rodičovskému prvku. jak se to dělá? Řekněme, že máme kontejner a náš experimentální subjekt je v něm:

< div id = "wrapper" > < div id = "header" > < / div > < / div >

Předpokládejme, že se jedná o záhlaví webu. Netáhne se přes celou šířku okna a potřebujeme jej vycentrovat. Píšeme takto:

#header( šířka / max - šířka : 800px ; okraj: 0 auto;

Musíme zadat přesnou nebo maximální šířku a poté zapsat klíčovou vlastnost - margin: 0 auto. Nastavuje vnější okraje naší hlavičky, první hodnota určuje horní a dolní okraj a druhá určuje pravý a levý okraj. Hodnota auto říká prohlížeči, aby automaticky vypočítal výplň na obou stranách tak, aby byl prvek přesně vycentrován na svého rodiče. Komfortní!

Zarovnání textu

To je také velmi jednoduchá technika. Chcete-li zarovnat všechny vložené prvky, můžete použít vlastnost zarovnání textu a její hodnoty: vlevo, vpravo, na střed. Ten vycentruje text, což je to, co potřebujeme. Stejným způsobem můžete dokonce zarovnat obrázek, protože je také ve výchozím nastavení vloženým prvkem.

Zarovnejte text svisle

Ale tohle je složitější. Ve výchozím nastavení neexistuje žádná jednoduchá, dobře známá vlastnost, která by snadno vertikálně vycentrovala text v blokovém kontejneru. Existuje však několik technik, se kterými designéři rozvržení v průběhu let přišli.

Nastavte výšku bloku pomocí odsazení. Cestou není nastavit explicitní výšku pomocí výšky, ale vytvořit ji uměle pomocí výplní nahoře a dole, které by měly být stejné. Vytvořme libovolný blok a zapišme do něj následující vlastnosti:

div( pozadí: #ccc; padding: 30px 0; )

div( pozadí : #ccc; odsazení: 30px 0;

Pozadí slouží pouze k vizuálnímu zobrazení okrajů a vycpávek. Výška bloku je nyní tvořena těmito dvěma odrážkami a čárou samotnou a vše vypadá takto:

Definujte výšku čáry pro blok. Myslím, že je to správnější způsob, pokud potřebujete zarovnat jeden řádek textu. S ním můžete zapsat výšku podle normálu pomocí vlastnosti height. Poté musí také nastavit výšku řádku, stejnou jako je výška bloku jako celku.

div( výška: 60px; výška řádku: 60px; )

div( výška: 60px; line-height: 60px;

Výsledek bude podobný jako na obrázku výše. Vše bude fungovat, i když přidáte vycpávky. Ovšem pouze na jeden řádek. Pokud potřebujete více textu v prvku, pak tato metoda nebude fungovat.

Převést blok na buňku tabulky. Podstatou této metody je, že buňka tabulky má vlastnost vertical-align: middle, která prvek vertikálně vystředí. V tomto případě je tedy třeba blok nastavit takto:

div( display: table-cell; vertical-align: middle; )

div( zobrazení: tabulka - buňka; vertikální - zarovnat : střed ;

Tato metoda je dobrá, protože můžete zarovnat tolik textu, kolik chcete, na střed. Lepší je ale napsat display: table do bloku, ve kterém je náš div vnořený, jinak to nemusí fungovat.

No a tady se dostáváme k poslední technice pro dnešek – tou je vertikální vyrovnání samotných bloků. Nutno říci, že opět neexistuje žádná vlastnost, která by byla k tomu přímo určena, ale existuje pár triků, o kterých byste měli vědět.

Nastavte odsazení v procentech. Pokud znáte výšku nadřazeného prvku a umístíte do něj další prvek bloku, můžete jej vycentrovat pomocí procentuálního odsazení. Například rodič má výšku 600 pixelů. Umístíte do něj blok, který je vysoký 300 pixelů. Jak moc potřebujete ustoupit nahoře a dole, abyste to vycentrovali? 150 pixelů každý, což je 25 % výšky rodiče.

Tato metoda umožňuje zarovnání pouze tehdy, když rozměry umožňují výpočty. A pokud je váš rodič vysoký 887 pixelů, pak nebudete moci přesně zaznamenat nic, to je již jasné.

Vložte prvek do buňky tabulky. Opět, pokud nadřazený prvek transformujeme na buňku tabulky, pak se do ní vložený blok automaticky svisle vycentruje. Chcete-li to provést, rodič stačí nastavit vertikální zarovnání: na střed.

A pokud k tomu navíc napíšeme margin: 0 auto, prvek bude vodorovně vycentrován!

Horizontální a vertikální zarovnání prvků lze provést různými způsoby. Volba metody závisí na typu prvku (blok nebo inline), typu jeho umístění, velikosti atd.

1. Vodorovné zarovnání na střed bloku/stránky

1.1. Pokud je zadána šířka bloku:

div ( šířka: 300px; okraj: 0 auto; /*vystředit prvek vodorovně v rámci nadřazeného bloku*/ )

Pokud chcete zarovnat vložený prvek tímto způsobem, je třeba jej nastavit na display: block;

1.2. Pokud je blok vnořen do jiného bloku a jeho šířka není specifikována/specifikována:

.wrapper(text-align: center;)

1.3. Pokud má blok šířku a je třeba jej vycentrovat na nadřazený blok:

.wrapper (pozice: relativní; /*nastavit relativní umístění nadřazeného bloku, abychom pak mohli blok v něm absolutně umístit*/) .box ( šířka: 400px; pozice: absolutní; vlevo: 50 %; margin-left: -200px / *posune blok doleva o vzdálenost rovnající se polovině jeho šířky*/ )

1.4. Pokud bloky nemají určenou šířku, můžete je vycentrovat pomocí nadřazeného bloku obalu:

.wrapper (text-align: center; /*umístit obsah bloku na střed*/) .box ( display: inline-block; /*uspořádat bloky vodorovně*/ margin-right: -0,25em; /* odstraňte správnou mezeru mezi bloky*/ )

2. Vertikální zarovnání

2.1. Pokud text zabírá jeden řádek, například pro tlačítka a položky nabídky:

.button ( výška: 50px; výška řádku: 50px; )

2.2. Jak svisle zarovnat blok v nadřazeném bloku:

.wrapper (position: relativní;).box ( height: 100px; position: absolute; top: 50%; margin: -50px 0 0 0; )

2.3. Vertikální zarovnání podle typu tabulky:

.wrapper ( display: table; width: 100%; ) .box ( display: table-cell; height: 100px; text-align: center; vertical-align: middle; )

2.4. Pokud má blok danou šířku a výšku a je třeba jej vycentrovat na nadřazený blok:

.wrapper ( pozice: relativní; ) .box ( výška: 100px; šířka: 100px; pozice: absolutní; nahoře: 0; vpravo: 0; dole: 0; vlevo: 0; okraj: auto; přetečení: auto; /*to obsah se nerozšířil */ )

2.5. Absolutní umístění ve středu stránky/bloku pomocí transformace CSS3:

pokud jsou pro prvek specifikovány rozměry

div ( width: 300px; /*nastavení šířky bloku*/ výška:100px; /*nastavení výšky bloku*/ transform: translate(-50%, -50%); position: absolute; top: 50 %; zbývá: 50 % ;

pokud prvek nemá žádné rozměry a není prázdný

h1 ( okraj: 0; transformace: přeložit (-50 %, -50 %); pozice: absolutní; nahoře: 50 %; vlevo: 50 %; )

Každý návrhář rozvržení se neustále potýká s potřebou zarovnat obsah do bloku: vodorovně nebo svisle. Existuje několik dobrých článků na toto téma, ale všechny nabízejí mnoho zajímavých, ale málo praktických možností, a proto musíte věnovat více času zvýraznění hlavních bodů. Rozhodl jsem se tyto informace prezentovat formou, která mi vyhovuje, abych už negooglil.

Zarovnání bloků se známými velikostmi

Nejjednodušší způsob použití CSS je zarovnat bloky, které mají známou výšku (pro vertikální zarovnání) nebo šířku (pro horizontální zarovnání).

Zarovnání pomocí vycpávky

Někdy nemůžete prvek vycentrovat, ale přidat k němu ohraničení pomocí " vycpávka".

Například existuje obrázek o rozměrech 200 x 200 pixelů a je třeba jej vycentrovat do bloku 240 x 300. Můžeme nastavit výšku a šířku vnějšího bloku = 200 pixelů a přidat 20 pixelů nahoře a dole a 50 vlevo a vpravo.

.example-wrapper1 (pozadí: #535E73; šířka: 200px; výška: 200px; odsazení: 20px 50px;)

Zarovnání absolutně umístěných bloků

Pokud je blok nastaven na " pozice: absolutní", pak jej lze umístit relativně k jeho nejbližšímu rodiči pomocí "position: relativní". To vyžaduje všechny vlastnosti (" nahoře","právo","dno","vlevo") vnitřního bloku pro přiřazení stejné hodnoty, stejně jako "margin: auto".

*Je zde nuance: Šířka (výška) vnitřního bloku + hodnota vlevo (vpravo, dole, nahoře) by neměla přesáhnout rozměry nadřazeného bloku. Je bezpečnější přiřadit 0 (nula) vlastnostem vlevo (vpravo, dole, nahoře).

.example-wrapper2 ( pozice : relativní ; výška : 250px ; pozadí : url(mezera.jpg) ; ) .cat-king ( šířka : 200px ; výška : 200px ; pozice : absolutní ; nahoře : 0 ; vlevo : 0 ; dole : 0 vpravo : 0 : auto ;

Horizontální zarovnání

Zarovnání pomocí "text-align: center"

Pro zarovnání textu do bloku existuje speciální vlastnost " zarovnání textu". Při nastavení na " centrum"Každý řádek textu bude zarovnán vodorovně. U víceřádkového textu se toto řešení používá extrémně zřídka, častěji lze tuto možnost najít pro zarovnání rozpětí, odkazů nebo obrázků.

Jednou jsem musel vymyslet nějaký text, abych ukázal, jak funguje zarovnání textu pomocí CSS, ale nic zajímavého mě nenapadlo. Nejprve jsem se rozhodl někde zkopírovat dětskou říkanku, ale vzpomněl jsem si, že by to mohlo zkazit jedinečnost článku a naši milí čtenáři by ho na Googlu nenašli. A pak jsem se rozhodl napsat tento odstavec – koneckonců pointa není s ním, ale pointa je v zarovnání.

.example-text ( text-align : center ; padding : 10px ; background : #FF90B8 ; )

Stojí za zmínku, že tato vlastnost bude fungovat nejen pro text, ale také pro všechny vložené prvky ("display: inline").

Ale tento text je zarovnán doleva, ale je v bloku, který je vystředěn vzhledem k obalu.

.example-wrapper3 ( text-align : center ; background : #FF90B8 ; ) .inline-text ( display : inline-block ; width : 40 % ; padding : 10px ; text-align : left ; background : #FFE5E5 ; )

Zarovnání bloků pomocí okraje

Prvky bloku se známou šířkou lze snadno zarovnat vodorovně nastavením na "margin-left: auto; margin-right: auto". Obvykle se používá zkratka: " okraj: 0 auto" (místo nuly lze použít jakoukoli hodnotu). Tato metoda však není vhodná pro vertikální zarovnání.

.lama-wrapper ( výška : 200px ; pozadí : #F1BF88 ; ) .lama1 ( výška : 200px ; šířka : 200px ; pozadí : url(lama.jpg) ; okraj : 0 auto ; )

Takto byste měli zarovnat všechny bloky, kde je to možné (tam, kde není vyžadováno pevné nebo absolutní umístění) - je to nejlogičtější a nejpřiměřenější. Ačkoli se to zdá samozřejmé, někdy jsem viděl děsivé příklady s negativními odrážkami, a tak jsem se rozhodl objasnit.

Vertikální zarovnání

Vertikální zarovnání je mnohem problematičtější - zjevně to nebylo v CSS zajištěno. Existuje několik způsobů, jak dosáhnout požadovaného výsledku, ale všechny nejsou příliš krásné.

Zarovnání s vlastností line-height

V případě, že je v bloku pouze jeden řádek, můžete jeho vertikálního zarovnání dosáhnout pomocí " výška čáry" a jeho nastavení na požadovanou výšku. Pro spolehlivost se vyplatí nastavit také "height", jehož hodnota se bude rovnat hodnotě "line-height", protože ta není podporována ve všech prohlížečích.

.example-wrapper4 ( line-height : 100px ; color : #DC09C0 ; background : #E5DAE1 ; height : 100px ; text-align : center ; )

Je také možné dosáhnout blokového zarovnání pomocí několika čar. Chcete-li to provést, budete muset použít další obalový blok a nastavit mu výšku řádku. Vnitřní blok může být víceřádkový, ale musí být „inline“. Musíte na něj použít „vertical-align: middle“.

.example-wrapper5 ( line-height : 160px ; height : 160px ; font-size : 0 ; background : #FF9B00 ; ) .example-wrapper5 .text1 ( display : inline-block ; font-size : 14px-height: ; 1.5 ; zarovnat na svislou stranu : pozadí : #FFFAF2 ;

Obalový blok musí mít nastavenou "velikost písma: 0". Pokud velikost písma nenastavíte na nulu, prohlížeč přidá pár pixelů navíc. Budete také muset určit velikost písma a výšku řádku pro vnitřní blok, protože tyto vlastnosti se dědí od nadřazeného bloku.

Vertikální zarovnání v tabulkách

nemovitost" svisle zarovnat" ovlivňuje i buňky tabulky. S hodnotou nastavenou na "middle" je obsah uvnitř buňky zarovnán na střed. Rozvržení tabulky je v dnešní době samozřejmě považováno za archaické, ale ve výjimečných případech jej můžete simulovat zadáním " displej: tabulka-buňka".

Obvykle používám tuto možnost pro vertikální zarovnání. Níže je uveden příklad rozvržení převzatého z dokončeného projektu. Zajímavý je obrázek, který je takto vertikálně vycentrován.

.one_product .img_wrapper ( display : table-cell ; height : 169px ; vertical-align : middle ; overflow : hidden ; background : #fff ; width : 255px ; ) .one_product img ( max-height : 169px ; max-width : 100px % ; min-width : 140px ;

Je třeba mít na paměti, že pokud má prvek nastavenou „float“ jinou než „none“, bude to v každém případě blok (zobrazení: blok) – pak budete muset použít další obal bloku.

Zarovnání s dalším vloženým prvkem

A pro vložené prvky můžete použít " svisle zarovnat: na střed". Navíc všechny prvky s " displej: inline", které jsou na stejné čáře, budou zarovnány se společnou středovou čarou.

Musíte vytvořit pomocný blok s výškou rovnou výšce nadřazeného bloku, poté bude požadovaný blok vycentrován. K tomu je vhodné použít pseudoprvky:before nebo:after.

.example-wrapper6 ( height : 300px ; text-align : center ; background : #70DAF1 ; ) .pudge ( display : inline-block ; vertical-align : middle ; background : url(pudge.png) ; background-color : # fff ; width : 200px ; height : 200px ; .riki ( display : inline-block ; height : 100 % ; vertical-align : middle ; )

Displej: flex a zarovnání

Pokud vám na uživatelích Exploreru 8 moc nezáleží, nebo vám na nich záleží natolik, že jste ochotni pro ně vložit kus javascriptu navíc, můžete použít „display: flex“. Flex boxy jsou skvělé při řešení problémů se zarovnáním a stačí napsat „margin: auto“, aby se obsah uvnitř vycentroval.

Zatím jsem se s touto metodou prakticky nikdy nesetkal, ale žádná speciální omezení pro ni nejsou.

.example-wrapper7 ( display : flex ; height : 300px ; background : #AEB96A ; ) .example-wrapper7 img ( margin : auto ; )

No, to je vše, co jsem chtěl napsat o zarovnání CSS. Centrování obsahu nyní nebude problém!

Myslím, že mnozí z vás, kteří se museli potýkat s rozložením, se setkali s potřebou zarovnat prvky vertikálně a znají potíže, které vznikají při zarovnání prvku na střed.

Ano, v CSS existuje speciální vícehodnotová vlastnost vertical-align pro vertikální zarovnání. V praxi to však vůbec nefunguje podle očekávání. Zkusme na to přijít.

Porovnejme následující přístupy. Zarovnat pomocí:

• stoly,
• odsazení,
• výška čáry
• protahování,
• záporná marže,
• transformovat
• pseudo prvek
• flexbox.

Pro ilustraci zvažte následující příklad.

Existují dva prvky div, přičemž jeden z nich je vnořen do druhého. Dejme jim odpovídající třídy – vnější a vnitřní.

Úkolem je zarovnat vnitřní prvek se středem vnějšího prvku.

Nejprve uvažujme případ, kdy jsou rozměry vnějších a vnitřních bloků známý. Přidejme zobrazení pravidla: inline-block k vnitřnímu prvku a text-align: center a vertical-align: middle k vnějšímu prvku.

Pamatujte, že zarovnání se vztahuje pouze na prvky, které mají režim zobrazení inline nebo inline-block.

Nastavíme velikosti bloků a také barvy pozadí, abychom viděli jejich okraje.

Vnější ( šířka: 200px; výška: 200px; text-align: center; vertical-align: middle; background-color: #ffc; ) .inner ( display: inline-block; width: 100px; height: 100px; background-color : #fcc)
Po použití stylů uvidíme, že vnitřní blok je zarovnán vodorovně, ale ne svisle:
http://jsfiddle.net/c1bgfffq/

Proč se to stalo? Jde o to, že vlastnost vertical-align ovlivňuje zarovnání prvek samotný, nikoli jeho obsah(kromě případů, kdy je aplikován na buňky tabulky). Použití této vlastnosti na vnější prvek tedy nic nevytvořilo. Navíc aplikace této vlastnosti na vnitřní prvek také nic neudělá, protože vložené bloky jsou zarovnány vertikálně vzhledem k sousedním blokům a v našem případě máme jeden vložený blok.

Existuje několik technik, jak tento problém vyřešit. Níže se na každý z nich podíváme blíže.

Zarovnání pomocí tabulky

První řešení, které mě napadá, je nahradit vnější blok tabulkou o jedné buňce. V tomto případě bude zarovnání aplikováno na obsah buňky, tedy na vnitřní blok.

http://jsfiddle.net/c1bgfffq/1/

Zjevnou nevýhodou tohoto řešení je, že ze sémantického hlediska je nesprávné používat k zarovnání tabulky. Druhou nevýhodou je, že vytvoření tabulky vyžaduje přidání dalšího prvku kolem vnějšího bloku.

První mínus lze částečně odstranit nahrazením tagů table a td div a nastavením režimu zobrazení tabulky v CSS.

.outer-wrapper ( display: table; ) .outer ( display: table-cell; )
Vnější blok však stále zůstane stolem se všemi z toho plynoucími důsledky.

Zarovnání pomocí odsazení

Pokud jsou známy výšky vnitřních a vnějších bloků, lze zarovnání nastavit pomocí svislých odsazení vnitřního bloku pomocí vzorce: (H vnější – H vnitřní) / 2.

Vnější ( výška: 200px; ) .vnitřní (výška: 100px; okraj: 50px 0; )
http://jsfiddle.net/c1bgfffq/6/

Nevýhodou řešení je, že je použitelné pouze v omezeném počtu případů, kdy jsou známé výšky obou bloků.

Zarovnání pomocí výšky čáry

Pokud víte, že vnitřní blok by neměl zabírat více než jeden řádek textu, můžete použít vlastnost line-height a nastavit ji na stejnou výšku vnějšího bloku. Vzhledem k tomu, že obsah vnitřního bloku by se neměl zalamovat do druhého řádku, doporučuje se přidat také pravidla white-space: nowrap a overflow: hidden.

Vnější ( výška: 200px; výška řádku: 200px; ) .vnitřní ( white-space: nowrap; overflow: hidden; )
http://jsfiddle.net/c1bgfffq/12/

Tuto techniku ​​lze také použít k zarovnání víceřádkového textu, pokud předefinujete hodnotu výšky řádku pro vnitřní blok a také přidáte pravidla zobrazení: inline-block a vertical-align: middle.

Outer ( height: 200px; line-height: 200px; ) .inner ( line-height: normal; display: inline-block; vertical-align: middle; )
http://jsfiddle.net/c1bgfffq/15/

Nevýhodou této metody je, že musí být známa výška vnějšího bloku.

Zarovnání pomocí "roztažení"

Tuto metodu lze použít, když je neznámá výška vnějšího bloku, ale je známa výška vnitřního bloku.

K tomu potřebujete:

1. nastavení relativního umístění k externímu bloku a absolutního umístění k vnitřnímu bloku;
2. přidejte pravidla top: 0 a bottom: 0 k vnitřnímu bloku, v důsledku čehož se roztáhne na celou výšku vnějšího bloku;
3. nastavte vertikální výplň vnitřního bloku na auto.

.vnější ( pozice: relativní; ) .vnitřní ( výška: 100px; pozice: absolutní; nahoře: 0; dole: 0; okraj: auto 0; )
http://jsfiddle.net/c1bgfffq/4/

Myšlenkou této techniky je, že nastavení výšky pro roztažený a absolutně umístěný blok způsobí, že prohlížeč vypočítá vertikální výplň ve stejném poměru, pokud je nastavena na auto.

Zarovnání se záporným okrajem-vrchol

Tato metoda se stala široce známou a používá se velmi často. Stejně jako předchozí se používá, když je neznámá výška vnějšího bloku, ale je známá výška vnitřního.

Musíte dát externímu bloku relativní polohu a vnitřnímu bloku absolutní polohu. Potom musíte posunout vnitřní blok dolů o polovinu výšky vnějšího horního okraje bloku: 50 % a zvednout ho o polovinu jeho vlastní výšky okraj-horní: -H vnitřní / 2.

Vnější ( pozice: relativní; ) .vnitřní ( výška: 100px; pozice: absolutní; nahoře: 50 %; margin-top: -50px; )
http://jsfiddle.net/c1bgfffq/13/

Nevýhodou této metody je, že musí být známa výška vnitřní jednotky.

Zarovnání s transformací

Tato metoda je podobná předchozí, ale lze ji použít, když výška vnitřní jednotky není známa. V tomto případě můžete místo nastavení záporného odsazení pixelů použít vlastnost transform a posunout vnitřní blok nahoru pomocí funkce translateY a hodnoty -50 % .

Vnější ( pozice: relativní; ) .vnitřní ( pozice: absolutní; nahoře: 50 %; transformace: přeložitY(-50 %); )
http://jsfiddle.net/c1bgfffq/9/

Proč nebylo možné nastavit hodnotu v procentech v předchozí metodě? Protože se hodnoty procentuálního okraje počítají vzhledem k rodičovskému prvku, hodnota 50 % by byla polovina výšky vnějšího rámečku a vnitřní rámeček bychom museli zvednout na polovinu jeho vlastní výšky. Vlastnost transform je pro to ideální.

Nevýhodou této metody je, že ji nelze použít, pokud má vnitřní jednotka absolutní polohování.

Zarovnání s Flexboxem

Nejmodernějším způsobem vertikálního zarovnání je použití flexibilního rozvržení boxu (populárně známého jako Flexbox). Tento modul umožňuje flexibilně ovládat umístění prvků na stránce a uspořádat je téměř kdekoli. Zarovnání na střed pro Flexbox je velmi jednoduchý úkol.

Vnější blok musí být nastaven na zobrazení: flex a vnitřní blok na margin: auto . A to je vše! Krásné, že?

Vnější ( displej: flex; šířka: 200px; výška: 200px; ) .vnitřní ( šířka: 100px; okraj: auto; )
http://jsfiddle.net/c1bgfffq/14/

Nevýhodou této metody je, že Flexbox podporují pouze moderní prohlížeče.

Jakou metodu mám zvolit?

Musíte začít od prohlášení o problému:

• Pro svislé zarovnání textu je lepší použít svislé odsazení nebo vlastnost line-height.
• Pro absolutně umístěné prvky se známou výškou (například ikony) je ideální metoda s negativní vlastností margin-top.
• Pro složitější případy, kdy výška bloku není známa, musíte použít pseudo prvek nebo vlastnost transform.
• No, pokud máte takové štěstí, že nepotřebujete podporovat starší verze prohlížeče IE, pak je samozřejmě lepší použít Flexbox.

Štítky: Přidat štítky

Ahoj! Pokračujeme v zvládnutí základů jazyka HTML. Podívejme se, co musíte napsat, abyste zarovnali text na střed, šířku nebo okraje.

Když se pustíme do práce, podívejme se, jak vycentrovat text v HTML třemi různými způsoby. Poslední dva jsou propojeny přímo se šablonou stylů. Může to být soubor CSS, který se připojuje ke stránkám webu a definuje jejich vzhled.

Metoda 1 - přímá práce s HTML

Je to vlastně docela jednoduché. Viz příklad níže.

Zarovnejte odstavec na střed.

Pokud potřebujete přesunout fragmenty textu jiným způsobem, zadejte místo parametru „centrum“ následující hodnoty:

• zarovnat – zarovná text na šířku stránky;
• vpravo – na pravém okraji;
• doleva - doleva.

Analogicky můžete přesunout obsah, který je v záhlaví (h1, h2) a kontejneru (div).

Metoda 2 a 3 - pomocí stylů

Výše uvedený design lze mírně změnit. Efekt bude stejný. Chcete-li to provést, musíte napsat níže uvedený kód.

Textový blok.

V této podobě je kód zapsán přímo do HTML, aby se textový obsah vycentroval.

Existuje další alternativní způsob, jak dosáhnout výsledků. Budete muset provést několik kroků.

Krok 1. Do hlavního kódu napište

Textový materiál.

Krok 2. Do přiloženého souboru CSS zadejte následující kód:

Rovno (text-align:center;)

Podotýkám, že slovo „rovno“ je jen název třídy, kterou lze nazvat jinak. To je ponecháno na uvážení programátora.

Analogicky v HTML můžete snadno zarovnat text na střed, zarovnat a zarovnat k pravému nebo levému okraji stránky. Jak vidíte, existuje mnohem více než jedna možnost, jak dosáhnout svého cíle.

Jen pár otázek:

• Děláte informační neziskový projekt?
• Chcete, aby se vaše webové stránky dobře umisťovaly ve vyhledávačích?
• Chcete si vydělávat online?

Pokud jsou všechny odpovědi kladné, podívejte se na integrovaný přístup k vývoji webových stránek. Informace budou užitečné zejména v případě, že běží na WordPress CMS.

Upozorňuji, že vlastní webové stránky jsou jen jednou z mnoha možností, jak generovat pasivní či aktivní příjem na internetu. Můj blog je věnován finančním příležitostem online.

Pracovali jste někdy v oblasti dopravní arbitráže, copywritingu a dalších oblastech činnosti, které generují primární nebo doplňkový příjem prostřednictvím spolupráce na dálku? To a mnohem více se můžete dozvědět právě teď na stránkách mého blogu.

V budoucnu zveřejním spoustu opravdu užitečných informací. Zůstaňte ve spojení. Pokud si přejete, můžete se přihlásit k odběru aktualizací Workip e-mailem. Formulář předplatného je umístěn níže.