Центриране на множество блокови елементи (DIV) с CSS
Би било хубаво, ако имахме същия лесен начин за центриране на множество елементи на ниво блок. Би било хубаво, ако CSS има свойство за подравняване на кутията (и стойност на center), което може да се използва за центриране на елементи на дъщерен блок спрямо родителя.
Можете да постигнете нещо подобно, като се възползвате от способността на CSS да "трансформира" елементи (поради липса на други термини). Вижте демонстрацията, за да разберете за какво става въпрос в този урок.
Обичайният начин
Трябва да направите блоковете плаващи. След това, за центриране, трябва да добавите лявото и дясното поле ( margin ) като крайно петно. Но има един проблем: IE6 не харесва плаващи блокове; ние също ще трябва да зададем наш собствен уникален клас или идентификатор за тези блокови елементи, които не изискват полета (или, обратното, тези, които изискват).
Има друго решение, което може да работи по-добре при определени обстоятелства.
Използване на вграден блок и управление на пространства
За да постигнете същия ефект, както когато създавате плаващи блокове ( float ) и добавяте полета към тези плаващи блокове ( margin ), можете да преобразувате блокови елементи във вградени кутии и да коригирате интервалите между тях. Ето как изглежда в CSS:
В примера по-горе предполагам, че има четири дъщерни кутии (всяка с дъщерен клас и 100px на 100px). Елементите са блокови елементи, които използваме CSS, за да променим на вградени блокови елементи, което им позволява да се оформят като текст. Тъй като нямаме текст в родителския контейнер, лесно е да контролирате съответно интервали и текст.
Родителският елемент (с id родител) има 4 ключови свойства, а децата имат 2.
- text-align центрира всички дъщерни вградени елементи
- letter-spacing контролира размера на всяко пространство между блоковете
- бяло пространство: nowrap предотвратява падането на последния елемент на следващия ред
- препълване: скрито предотвратява разтягането на блока в IE6
- vertical-align: middle (за деца) поддържа блоковете в една и съща вертикална равнина при добавяне на съдържание
- дисплей: inline-block (очевидно)
Internet Explorer показва себе си
Какво би бил CSS без решения, специфични за IE? Този метод работи по същия начин във всеки браузър (включително IE8), с изключение на IE6 и IE7, тъй като поддръжката на вградени блокове не е напълно внедрена в IE6 и IE7. За да постигнете желания резултат в тези браузъри, трябва да добавите следния CSS:
Показаният по-горе CSS трябва да се прилага само към IE6 и IE7 и само след останалата част от кода. Хакът със звездичка ми помогна да изпълня тези изисквания в моя код (и в кода в примера по-горе). Звездичка в началото на всеки ред скрива и двата реда от всеки браузър, с изключение на IE6 и IE7. Добавените тук полета ни позволяват да получим визуалните ефекти, които искаме, а новото свойство на дисплея прави елементите вградени, като по този начин решава проблема с IE6/IE7.
Недостатъци, заключение
Това решение практически няма недостатъци. Само не забравяйте, че използваните интервали (разстояние между буквите) и настройките на текста (бели интервали и т.н.) трябва да бъдат нулирани за всеки дъщерен елемент вътре в блокове. Следователно, докато решението може да работи за последователни изображения и нетекстово съдържание, ако блоковете са запълнени с разнообразно съдържание, по-добре е да не го прилагате.
