Nastavení zarovnání obrázku WordPress – vysvětleno!

Předmětem zarovnání obrázků je ten, který je u nováčků WordPress často nepochopen. Když přidáte obrázek do svého obsahu (v rámci příspěvků nebo stránek), WordPress vám nabízí čtyři výchozí způsoby, jak zarovnat uvedený obrázek: zarovnat „doleva“, zarovnat „střed“, zarovnat „vpravo“ a zarovnat „žádný“ *.


Podívejme se na každou z nich postupně:

1. Zarovnejte doleva

Obrázek, kterému bylo přiřazeno levé zarovnání, bude efektivně posouván vlevo od části stránky, na které je umístěn (například levá hranice příspěvku obsahu WordPress obsahu stránky), a jakýkoli další obsah (například text) bude omotejte kolem jeho dalších tří okrajů – vyplňte oblast vpravo od místa, kde se obrázek nachází.

Příklad:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Zarovnat doleva Duis auto irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Udržujte ad minimis veniam, quis nostrud cvičení ullamco laboris nisi ut aliquip ex ea komodo. Duis auto irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

2. Zarovnejte střed

Pokud chcete, aby byl váš obrázek centralizován v části stránky, na které je umístěn (tj. Se stejným odstupem mezi okrajem oblasti obsahu a jeho levým a pravým okrajem), vyberte zarovnání „Centrální“. Na rozdíl od výše uvedeného zarovnání „Vlevo“ se žádný sousední obsah (například text) neobalí kolem obrázku – místo toho bude umístěn buď nad nebo pod obrázkem (v závislosti na tom, kam v textu jste se rozhodli vložit) řekl obrázek).

Příklad:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Zarovnat centrum Duis auto irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

3. Zarovnejte vpravo

Zarovnání obrázku vpravo je, jak byste očekávali, do značné míry přesným obrácením obrázku zarovnání doleva – obrázek bude posunut napravo od části stránky, na které je umístěn (tj. Pravý okraj vaší stránky) WordPress příspěvek s obsahem stránky) a jakýkoli další obsah (jako je text atd.) Se omotá kolem svých dalších tří okrajů: vyplní tak oblast vlevo od něj.

Příklad:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Zarovnání vpravo Duis auto irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Udržujte ad minimis veniam, quis nostrud cvičení ullamco laboris nisi ut aliquip ex ea komodo. Duis auto irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

4. Zarovnat žádné

Obrázky, které k nim nemají přiřazené zarovnání (jejich přiřazením zarovnání „Žádný“), budou sedět přesně na místě, kde je najdete – tj. Pokud se rozhodnete umístit obrázek s přiřazením zarovnání „Žádný“ do odstavce textu (viz následující příklad níže), bude umístěn inline s tímto textem, což bude mít za následek, že bude text vlevo i vpravo od obrázku (za předpokladu, že obrázek není stejná šířka – nebo širší – než oblast) ve kterém sedí **). Avšak matoucí je, že obrázek, kterému bylo přiděleno zarovnání ‘None’ AND sedí v jeho vlastním odstavci (tj. Na novém řádku v editoru WordPress a / nebo konkrétně v HTML ‘p’ tagech) bude umístěn vlevo oblasti, ve které se nachází (podobně jako by tomu bylo v případě, že by byla zarovnána), ale bez textu vpravo od ní. Proč? Protože obrázek nemá žádné konkrétní zarovnání (nebo, v technice ‘: žádný konkrétní levý nebo pravý’ plovák ‘), který sedí v jeho vlastním odstavci (bez dalších prvků ve stejném odstavci), bude oddělen od obou svých předchozích a sledováním obsahu předdefinovanými mezerami – stejným způsobem, jaký bude mít jakýkoli jiný odstavec!

Příklad:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Zarovnat žádné Duis auto irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Co se tady vlastně děje?

Proč se to všechno děje? Je to vlastně vše díky počítačovému jazyku, který se používá k vyjádření prezentace (rozvržení, rozměry, barvy atd.) Webových prvků, známých jako Kaskádové styly – zkrátka „CSS“. Například při každém přiřazení, řekněme, zarovnání doleva k obrázku v příspěvku nebo stránce, například WordPress připojí k tomuto obrázku název třídy HTML „zarovnání“, který pak efektivně přinutí obrázek odkazovat na konkrétní sadu. předdefinovaných příkazů CSS, které mu řeknou, kde musí na stránce sedět – jednoduché! Podobně pro každé další zmíněné zarovnání přiřazuje WordPress různé názvy tříd – například „zarovnání“ (pro obrazy, které mají být zarovnány centrálně), „zarovnání“ (pro obrázky, které mají být zarovnány vpravo) a „zarovnání“ (pro obrázky, které jsou nemá přiřazeno žádné konkrétní zarovnání) – každá reference odkazuje na různé sady příkazů CSS.

Nepochybně (bohužel) může být myšlenka omotání hlavy kolem světa příkazů CSS pro průměrného uživatele WordPress více než trochu skličující; Máte-li však zájem dozvědět se o nich více, rychle vám umožní získat zcela nový stupeň svobody, pokud jde o styling vašeho obsahu – nebo dokonce celý váš web! Pokud se chcete učit, podívejte se na náš dřívější příspěvek o tom, kde nejlépe jít o učení CSS online – nebo se prostě vydejte na dobrou webovou stránku Google a začněte divoce! ;)

souhrn

Takže tam to máte: vysvětlování zarovnání obrázků! Stručně řečeno: zarovnání doleva použijte, pokud chcete, aby obraz seděl vlevo a další prvky (jako text atd.), Které se budou obtékat doprava; použijte centrální zarovnání, pokud chcete, aby obraz seděl uprostřed / uprostřed vašeho obsahu bez dalších prvků na obou stranách; použijte správné zarovnání, pokud chcete, aby obraz seděl vpravo a další sousední prvky webu se obtékaly kolem něj vlevo; a použijte zarovnání „žádný“, pokud chcete, aby váš obrázek seděl přesně tam, kde se rozhodnete umístit vzhledem k sousedním prvkům (tj. textu atd.) – A konečně, pokud chcete, aby byl obrázek umístěn vlevo od obsahu -area, ve kterém je umístěn, ale nechce, aby se napravo od něj objevil žádný text atd., přiřaďte obrázku zarovnání ‘None’ a ujistěte se, že sedí ve svém vlastním soukromém odstavci!

* prostřednictvím rozbalovací nabídky v pravé dolní části okna „Media Library“ WordPress pod pod záhlavím „Nastavení zobrazení příloh“.

** v tom případě by text, který by normálně seděl na obou jeho stranách, neměl nikde jinde, než nad nebo pod obrázkem – mějte na paměti, že takové případy mohou často vést k záměně mezi všemi čtyřmi zarovnáními, protože žádný prostor pro jiné text / prvky na obou stranách obrázku v podstatě nezmění, jaké zarovnání zvolíte!

Užitečný?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map