Настройки за подравняване на изображението в WordPress – обяснено!

Темата за подравняване на изображения е тази, която обикновено е неразбрана от начинаещите WordPress. Когато отидете да добавите изображение към съдържанието си (в рамките на публикации или страници), WordPress ви предлага четири начина по подразбиране на това изображение: подравнете „наляво“, подравнете „Център“, подравнете „Надясно“ и подравнете „Няма“ *.


Нека разгледаме всеки от тях на свой ред:

1. Подравнете наляво

Изображение, на което е присвоено ляво подравняване, ефективно ще бъде избутано вляво от частта на страницата, в която се намира (като например лявата граница на вашата WordPress публикация на съдържанието на страницата) и всяко друго съдържание (например текст) ще увийте около другите си три граници – запълване на областта вдясно от мястото, където се намира изображението.

Пример:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Подравнете наляво Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officiala deserunt mollit anim id est trudum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad min veniam, quis nostrud exeritation ullamco Laboris nisi ut aliquip ex ea comodo followat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

2. Център за подравняване

Ако искате вашето изображение да бъде централизирано в частта на страницата, в която седи (т.е. с еднакво количество разстояние между ръба на областта на съдържанието и неговата лява и дясна граница), изберете подреждане „Централно“. За разлика от гореспоменатото подравняване „Ляво“, всяко съседно съдържание (като текст) няма да се увива около изображението – вместо това ще бъде разположено над или под изображението (в зависимост от това къде в текста, който сте избрали да вмъкнете казаното изображение).

Пример:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Център за привеждане в съответствие Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Изключителен sint occaecat cupidatat non proident, sunt in culpa qui officiala deserunt mollit anim id est Laborum.

3. Подравнете надясно

Дясното подравняване на изображение е, както може би очаквате, точно обратната страна на лявото подравняване на изображението – изображението ще бъде изтласкано вдясно от частта на страницата, в която се намира (т.е. дясната граница на вашия Публикуването на WordPress на съдържанието на страницата) и всяко друго съдържание (като текст и т.н.) ще се увие около трите му граници: по този начин ще запълни областта вляво от нея.

Пример:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Правилно подравнено изображение Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officiala deserunt mollit anim id est trudum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad min veniam, quis nostrud exeritation ullamco Laboris nisi ut aliquip ex ea comodo followat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

4. Подравняване няма

Изображенията, които не им присвояват подравняване (като им разпределите подравняване на „None“), ще седят точно на мястото, което ги намерите – т.е. ако решите да позиционирате изображение, присвоено подравняване на „None“ в абзац от текст (вижте следния пример по-долу), той ще бъде позициониран редом с този текст, което ще доведе до текст отляво и отдясно на изображението (при условие че изображението не е със същата ширина – или по-широка – от зоната в който седи **). Обаче объркващо изображението, на което НАДОБРАТА е присвоено подравняване на ‘None’ И се намира в рамките на собствения му абзац (т.е. на нов ред в редактора на WordPress и / или конкретно в HTML ‘p’ таговете), ще бъде позиционирано отляво от зоната, в която пребивава (по сходен начин с тази, ако беше оставена подравнена), но без никакъв текст вдясно от нея. Защо? Тъй като изображението няма конкретно подравняване (или, в технологичен план: няма конкретен ляв или десен „плаващ“), който се намира в рамките на собствения му абзац (без други елементи в същия абзац), ще бъде отделен от предходния му и следвайте съдържанието по редове от предварително зададено бяло пространство – по почти същия начин, както всеки друг параграф!

Пример:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Подравняване няма Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Изключителен sint occaecat cupidatat non proident, sunt in culpa qui officiala deserunt mollit anim id est Laborum.

И така, какво всъщност става тук?

Защо всичко това се случва? Всъщност всичко се дължи на компютърен език, използван за изразяване на представянето (оформление, размери, цветове и т.н.) на уеб елементи, известни като Cascading Style Sheets – или „CSS“ за кратко. По същество всеки път, когато присвоите, да речем, подравняване вляво на изображение в публикация или страница, например, WordPress добавя име на HTML клас на „alignleft“ към споменатото изображение, което след това ефективно принуждава изображението да се позовава на конкретен набор от предварително зададени CSS команди, които му казват къде трябва да седи на страницата – просто! По подобен начин, за всяко друго споменато подравняване, WordPress присвоява различни имена на класове – като „подравняване“ (за изображения, които трябва да бъдат подравнени по централен път), „подравняване“ (за изображения, които трябва да бъдат подравнени надясно) и „подравняване“ (за изображения, които са да няма определено подравняване) – че всеки препраща различни набори CSS команди.

Несъмнено (за съжаление) идеята да увиете главата си по света на CSS команди може да бъде повече от малко обезсърчаваща за обикновения потребител на WordPress; Ако обаче имате интерес да научите повече за тях, те бързо ще ви дадат възможност да придобиете съвсем нова степен на свобода, когато става въпрос за стилизиране на съдържанието ви – или дори целия ви уебсайт! Ако се интересувате от учене, разгледайте по-ранната ни публикация за това къде е най-добре да научите CSS онлайн – или, като алтернатива, просто се насочете към добрия Google и станете див! )

резюме

Така че, има го: обяснение на подравняванията на изображенията! Накратко: използвайте подравняване вляво, когато искате изображението да седи отляво и други елементи (като текст и т.н.), за да го увиете вдясно; използвайте централно подравняване, когато искате изображението да седи в средата / центъра на съдържанието ви, без други елементи от двете му страни; използвайте дясно подравняване, когато искате изображението да седи вдясно и други съседни уеб елементи, за да се увиете вляво; и използвайте подравняване на ‘none’, ако искате изображението ви да седи точно там, където решите да го поставите спрямо съседните му елементи (т.е. текст и т.н.) – И накрая, ако искате изображението да се намира вляво от съдържанието -в зоната, в която се намира, НО не искайте текст и т.н., показващи се отдясно от него, присвойте изображението подравняване на „None“ и се уверете, че се намира в собствения си част!

* чрез падащо меню, намиращо се в долната дясна част на прозореца на WordPress „Media Library“, под подзаглавието „Настройки за показване на дисплея“.

** в този случай текстът, който обикновено се намира от двете страни на него, няма да има къде другаде, освен над или под изображението – имайте предвид, че подобни случаи често могат да доведат до объркване между четирите подравнявания, тъй като няма място за никое друго текст / елементи от двете страни на изображението, по същество няма да има значение кое подравняване изберете да използвате!

Полезен?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me