Трябва да е лесно за намиране от посетителя необходимата информацияна страницата. За това, както и за изразяване на някакъв израз, разн HTML тагове. Тази статия ще обсъди нюансите на работа с таблици, по-специално тяхното подравняване.
Основни тънкостиНа първо място, трябва да се отбележи, че тази графична форма на представяне на данни ви позволява да структурирате информация, което значително улеснява нейното асимилиране. В клетките на таблицата може да има почти всяко съдържание: от текст до видео. Важно е да се вземе предвид не само размерът, но и местоположението му.
Как да центрирам самата масаНай-често трябва да подредите таблицата в центъра на страницата, въпреки че първоначално тя е притисната към лявата страна на страницата. За да го подравните към центъра, трябва да зададете свойството му margin на auto.
Това кара отстъпът на таблицата да се изчислява автоматично. След това таблицата ще бъде в центъра на страницата.
Централно подравняване в клеткитеСъщо толкова често трябва да подравните данните към центъра на клетката. Има три начина за това: хоризонтален, вертикален и абсолютен. От името им става ясно по коя ос ще се извърши центрирането. Във всеки случай се използва етикетът
| Текст, центриран в клетка |
Ако искате да направите това форматиране стандартно за целия сайт или страница (за да не пренаписвате всяка таблица), тогава трябва да използвате CSS стилове. За да направите това, добавете следния код вътре в етикета:
таблица ( align: center; // За подравняване на съдържанието на таблицата хоризонтално центрирано vertical-align: middle; // За подравняване на съдържанието на таблицата вертикално центрирано)
Използвайки този метод, можете също да зададете подравняването за конкретна клетка, колона, ред или цялата таблица като цяло. Както можете да видите, всеки от методите е много прост.
В CSS някои на пръв поглед прости неща не се правят толкова лесно. Едно от тези неща е подравняването, т.е. когато един елемент трябва да бъде позициониран по определен начин спрямо друг.
Тази статия представя някои готови решения, които ще помогнат за опростяване на работата по хоризонтално и/или вертикално центриране на елементи.
Забележка: Под всяко решение има списък с браузъри, показващи версиите, в които посоченият CSS код работи.
CSS - Блок за централно подравняване1. Подравняване на един блок спрямо центъра на друг. В този случай първият и вторият блок имат динамични размери.
... ...
Родител ( позиция: относителна; ) .child ( позиция: абсолютна; ляво: 50%; горе: 50%; -webkit-transform: превод (-50%, -50%); -moz-transform: превод (-50% , -50%); -преобразуване: превод (-50%, -50%); ;)
- Chrome 4.0+
- Firefox 3.6+
- Internet Explorer 9+
- Opera 10.5+
- Safari 3.1+
2. Подравняване на един блок спрямо центъра на друг. В този случай вторият блок е с фиксирани размери.
Родител ( позиция: относителна; ) .child ( позиция: абсолютна; ляво: 50%; горе: 50%; /* ширина и височина на 2 блока */ ширина: 500px; височина: 250px; /* Стойностите се определят в зависимост върху неговия размер */ /* margin-left = - width / 2 */ margin-left: -250px /* margin-top = - height / 2 */ margin-top: -125px )
Браузъри, които поддържат това решение:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 4.0+
- Opera 7.0+
- Safari 1.0+
3. Подравняване на един блок спрямо центъра на друг. В този случай вторият блок има размери, посочени в проценти.
Родител ( позиция: относителна; ) .child ( позиция: абсолютна; /* ширина и височина на 2 блока в % */ височина: 50%; ширина: 50%; /* Стойностите се определят в зависимост от неговия размер в % * / отляво: 25%; /* (100% - ширина) / 2 */ отгоре: 25% /* (100% - височина) / 2 */ )
Браузъри, които поддържат това решение:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 4.0+
- Opera 7.0+
- Safari 1.0+
1. Подравнете единия блоков елемент(дисплей: блок) спрямо другия (в който се намира) хоризонтално:
... ...
Блок ( margin-left: auto; margin-right: auto; )
Браузъри, които поддържат това решение:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 6.0+
- Opera 3.5+
- Safari 1.0+
2. Подравнете хоризонтално елемент на линия (показване: inline) или блок на линия (показване: inline-block):
... ...
Родител ( подравняване на текста: център; ) .child ( дисплей: вграден блок; )
Браузъри, които поддържат това решение:
- Chrome 1.0+
- Firefox 3.0+
- Internet Explorer 8.0+
- Opera 7.0+
- Safari 1.0+
1. Центрирайте един елемент (display: inline, display: inline-block) спрямо другия (в който се намира) в центъра. Родителският блок в този пример има фиксирана височина, която се задава с помощта на свойството CSS line-height.
... ...
Родител (височина на линия: 500px;) .child (дисплей: вграден блок; вертикално подравняване: по средата;)
Браузъри, които поддържат това решение:
- Chrome 1.0+
- Firefox 3.0+
- Internet Explorer 8.0+
- Opera 7.0+
- Safari 1.0+
2. Центриране на един блок спрямо друг вертикално чрез представяне на родителя като таблица, а детето като клетка от тази таблица.
Родител ( дисплей: таблица; ) .child ( дисплей: клетка-таблица; вертикално подравняване: средата; )
Браузъри, които поддържат това решение:
- Chrome 1.0+
- Firefox 1.0+
- Internet Explorer 8.0+
- Opera 7.5+
- Safari 1.0+
Ако знаете други интересни трикове или полезни готови решения за подравняване, споделете ги в коментарите.
Мисля, че много от вас, които са се сблъсквали с оформлението, са се сблъсквали с необходимостта да подравняват елементите вертикално и знаят трудностите, които възникват при подравняването на елемент към центъра.
Да, има специално многостойностно свойство vertical-align в CSS за вертикално подравняване. На практика обаче изобщо не работи според очакванията. Нека се опитаме да разберем това.
Нека сравним следните подходи. Подравнете с помощта на:
- маси,
- отстъп,
- височина на реда
- разтягане,
- отрицателен марж,
- трансформирам
- псевдо елемент
- flexbox.
Има два елемента div, като единият е вложен в другия. Да им дадем съответните класове – външни и вътрешни.
Предизвикателството е да подравните вътрешния елемент с центъра на външния елемент.
Първо, нека разгледаме случая, когато са известни размерите на външните и вътрешните блокове. Нека добавим правилото display: inline-block към вътрешния елемент и text-align: center и vertical-align: middle към външния елемент.
Не забравяйте, че подравняването се прилага само за елементи, които имат вграден режим или режим на вграден блок.
Нека зададем размерите на блоковете, както и цветовете на фона, така че да можем да видим границите им.
Външен (ширина: 200px; височина: 200px; подравняване на текст: център; вертикално подравняване: средата; цвят на фона: #ffc;) .inner (дисплей: вграден блок; ширина: 100px; височина: 100px; цвят на фона : #fcc )
След като приложим стиловете, ще видим, че вътрешният блок е подравнен хоризонтално, но не и вертикално:
http://jsfiddle.net/c1bgfffq/
Защо се случи това?Въпросът е, че свойството vertical-align засяга подравняването на самия елемент, а не неговото съдържание (освен когато се прилага към клетките на таблицата). Следователно прилагането на това свойство към външния елемент не доведе до нищо. Освен това прилагането на това свойство към вътрешен елемент също няма да направи нищо, тъй като вградените блокове са подравнени вертикално спрямо съседните блокове и в нашия случай имаме един вграден блок.
Има няколко техники за решаване на този проблем. По-долу ще разгледаме по-отблизо всеки от тях.
Подравняване с помощта на таблица Първото решение, което идва на ум, е да замените външния блок с таблица от една клетка. В този случай подравняването ще се приложи към съдържанието на клетката, тоест към вътрешния блок.
http://jsfiddle.net/c1bgfffq/1/
Очевиден минус това решение– от семантична гледна точка е неправилно да се използват таблици за подравняване. Вторият недостатък е, че създаването на таблица изисква добавяне на друг елемент около външния блок.
Първият минус може да бъде частично премахнат чрез замяна на етикетите table и td с div и настройка на режима на показване на таблицата в CSS.
.outer-wrapper ( display: table; ) .outer ( display: table-cell; )
Външният блок обаче ще си остане маса с всички произтичащи от това последствия.
Външен (височина: 200px;) .вътрешен (височина: 100px; поле: 50px 0;)
http://jsfiddle.net/c1bgfffq/6/
Недостатъкът на решението е, че е приложимо само в ограничен брой случаи, когато са известни височините на двата блока.
Подравняване с line-height Ако знаете, че вътрешният блок трябва да заема не повече от един ред текст, тогава можете да използвате свойството line-height и да го зададете равно на височината на външния блок. Тъй като съдържанието на вътрешния блок не трябва да се пренася във втория ред, препоръчително е също да добавите правилата white-space: nowrap и overflow: hidden.Outer (височина: 200px; line-height: 200px;) .inner (white-space: nowrap; overflow: hidden;)
http://jsfiddle.net/c1bgfffq/12/
Тази техника може да се използва и за подравняване на многоредов текст, ако предефинирате стойността на височината на реда за вътрешния блок и също така добавите правилата display: inline-block и vertical-align: middle.
Outer (височина: 200px; line-height: 200px;) .inner (line-height: normal; display: inline-block; vertical-align: middle;)
http://jsfiddle.net/c1bgfffq/15/
Минус този методе, че трябва да се знае височината на външния блок.
Подравняване чрез "разтягане" Този метод може да се използва, когато височината на външния блок е неизвестна, но височината на вътрешния блок е известна.За да направите това ви трябва:
http://jsfiddle.net/c1bgfffq/4/
Идеята зад тази техника е, че задаването на височина за разтегнат и абсолютно позициониран блок кара браузъра да изчислява вертикалната подложка в еднакво съотношение, ако е зададено на auto.
Подравняване с използване на отрицателен margin-top Този метод стана широко известен и се използва много често. Подобно на предишния, той се използва, когато височината на външния блок е неизвестна, но височината на вътрешния е известна.Трябва да настроите външния блок на относително позициониране, а вътрешния блок на абсолютно позициониране. След това трябва да преместите вътрешния блок надолу с половината от височината на външния блок отгоре: 50% и да го повдигнете нагоре с половината от неговата собствена височина margin-top: -H вътрешен / 2.
Outer (позиция: относителна; ) .inner (височина: 100px; позиция: абсолютна; top: 50%; margin-top: -50px; )
http://jsfiddle.net/c1bgfffq/13/
Недостатъкът на този метод е, че трябва да се знае височината на вътрешното тяло.
Подравняване чрез трансформация Този метод е подобен на предишния, но може да се използва, когато височината на вътрешния блок е неизвестна. В този случай, вместо да зададете отрицателна пикселна подложка, можете да използвате свойството transform и да преместите вътрешния блок нагоре, като използвате функцията translateY и стойност от -50%.Външен ( позиция: относителна; ) .вътрешен ( позиция: абсолютна; горна: 50%; трансформация: translateY(-50%); )
http://jsfiddle.net/c1bgfffq/9/
Защо беше невъзможно да се зададе стойността като процент в предишния метод? Тъй като стойностите на процентния марж се изчисляват спрямо родителския елемент, стойност от 50% ще бъде половината от височината на външната кутия и ще трябва да повдигнем вътрешната кутия до половината от собствената й височина. Свойството transform е идеално за това.
Недостатъкът на този метод е, че не може да се използва, ако вътрешното тяло има абсолютно позициониране.
Подравняване с Flexbox Най-модерният начин за вертикално подравняване е използването на Flexible Box Layout (известен като Flexbox). Този модул ви позволява гъвкаво да контролирате позиционирането на елементите на страницата, като ги подреждате почти навсякъде. Централното подравняване за Flexbox е много проста задача.Външният блок трябва да бъде настроен на display: flex, а вътрешният блок на margin: auto. И това е всичко! Красиво, нали?
Външен ( дисплей: гъвкав; ширина: 200px; височина: 200px; ) .inner (ширина: 100px; поле: автоматично; )
http://jsfiddle.net/c1bgfffq/14/
Недостатъкът на този метод е, че Flexbox се поддържа само от модерни браузъри.
Кой метод да избера? Трябва да започнете от изложението на проблема:- За вертикално подравняване на текст е по-добре да използвате вертикални отстъпи или свойството line-height.
- За абсолютно позиционирани елементи с известна височина (например икони), методът с отрицателно свойство margin-top е идеален.
- За повече сложни случаиКогато височината на блока е неизвестна, трябва да използвате псевдо елемент или свойството transform.
- Е, ако имате толкова късмет, че не е необходимо да поддържате по-стари версии на браузъра IE, тогава, разбира се, е по-добре да използвате Flexbox.
Тагове: Добавете тагове
18.02.15 21.4KАко изрежете който и да е уебсайт, създаден на базиран на html, тогава пред вас ще се появи определена структура слой по слой. При това със собствените си външен видще бъде подобно на пластова торта. Ако мислите така, тогава най-вероятно не сте яли от дълго време. Така че първо задоволявайте глада си, а след това ще ви кажем как да центрирате div слой на вашия сайт:
Предимства на оформлението с помощта на етикетИма два основни типа структура на уебсайта:
- Табличен;
- Блокирайте.
Табличното оформление беше доминиращо дори в зората на интернет. Предимствата му включват точността на определеното позициониране. Но въпреки това има очевидни недостатъци. Основните са обемът на кода и ниска скоростизтегляния.
Когато използвате таблично оформление, уеб страницата няма да се покаже, докато пълно натоварване. Докато при използване на div блокове, елементите се показват веднага.
освен висока скоростзареждане блок конструкция на сайта ви позволява да намалите обема няколко пъти html код. Включително чрез използването на CSS класове.
Трябва обаче да се използва таблично оформление за структуриране на показването на данни на страницата. Класически пример за използването му е показването на таблици.
Конструкцията на блокове, базирана на етикети, се нарича още слой по слой, а самите блокове се наричат слоеве. Това е така, защото когато се използват определени стойности на свойства, те могат да бъдат подредени една върху друга, подобно на слоевете във Photoshop.
Помощни средства за позициониранеПри блоково оформление е по-добре да позиционирате слоевете с помощта на каскадни стилови листове. Основното свойство на CSS, отговорно за оформлението, е float.
Синтаксис на свойството:
float: ляво | надясно | няма | наследяват
където:
- ляво – подравнете елемента към левия край на екрана. Потокът около останалите елементи се случва отдясно;
- дясно – подравняване отдясно, обтичане на други елементи – отляво;
- няма – опаковането не е разрешено;
- inherit – наследява стойността на родителския елемент.
Нека да разгледаме лек пример за позициониране на div с помощта на това свойство:
#left (ширина: 200px; височина: 100px; float: ляво; фон: rgb(255,51,102); ) #right (ширина: 200px; височина: 100px; float: дясно; background: rgb(0,255,153); ) Ляв блок Десен блок
Сега ще се опитаме да използваме същото свойство, за да позиционираме третия div в центъра на страницата. Но за съжаление float няма централна стойност. И когато дадете на нов блок стойност за подравняване надясно или наляво, той се измества в указаната посока. Следователно всичко, което остава, е да зададете float: left и на трите блока:
Но това не е така най-добрият вариант. При намаляване на размера на прозореца всички слоеве се подреждат в един ред вертикално, а при увеличаване на размера се придържат към левия ръб на прозореца. Така че имаме нужда от по-добър начин за центриране на div. Центриращи слоеве
В следващия пример ще използваме контейнерен слой, в който ще поставим останалите елементи. Това решава проблема с блоковете, които се движат един спрямо друг, когато размерът на прозореца се промени. Центрирането на контейнера в средата се извършва чрез задаване на свойствата на полето на нула за полетата от горния ръб и автоматично отстрани (поле: 0 автоматично):
#container (ширина: 600px; поле: 0 автоматично; ) #left (ширина: 200px; височина: 100px; float: ляво; фон: rgb(255,51,102); ) #right (ширина: 200px; височина: 100px; float : ляво; фон: rgb(0,255,153); #center (ширина: 200px; височина: 100px; float: left; background: rgb(255,0,0); ) Ляв блок Централен блок Десен блок
Същият пример показва как можете да центрирате div хоризонтално. И ако редактирате малко горния код, можете да постигнете вертикално подравняване на блоковете. За да направите това, просто трябва да промените дължината на контейнерния слой (да го намалите). Тоест, след редактиране неговият css клас трябва да изглежда така:
След промяната всички блокове ще се подредят строго в един ред в средата. И тяхната позиция няма да се промени независимо от размера на прозореца на браузъра. Ето как изглежда вертикалното центриране на div:
В следващия пример използвахме няколко нови css свойства за центриране на слоеве вътре в контейнер:
#контейнер (ширина: 450px; височина:150px; margin:0 auto; цвят на фона:#66CCFF;) #left (ширина: 100px; височина: 100px; фон: rgb(255,51,102); дисплей: inline-block; vertical-align: middle; margin-left: 35px; #right (ширина: 100px; height: 100px; background: rgb(0,255,153); display: inline-block; vertical-align: middle; margin-left: 35px; ) #center (ширина: 100px; височина: 100px; фон: rgb(255,0,0); display: inline-block; vertical-align: middle; margin-left: 35px; )
Кратко описание на свойствата на css и техните стойности, които използвахме в в този примерза центриране на div вътре в div:
- дисплей: inline-block – подравнява блоков елемент в линия и гарантира, че се обвива около друг елемент;
- vertical-align: middle – подравнява елемента в средата спрямо родителя;
- margin-left – задава лявото поле.
Колкото и странно да звучи, това е възможно. Понякога div блок като връзка може да е необходим, когато оформяте различни видове менюта. Нека да разгледаме практически пример за внедряване на слой за връзки:
#layer1( width: 500px; height: 100px; background: rgb(51,255,204); border:groove; ) a ( display: block; text-align: center; height: 100%; color: rgb(255,0,51) ; ) Връзка към нашия уебсайт
В този пример, използвайки реда display: block, задаваме връзката към стойността на блоков елемент. И така, че цялата височина на div блока да стане връзка, задайте височина: 100%. Скриване и показване на блокови елементи
Блоковите елементи предоставят повече възможности за разширяване на функционалността на интерфейса, отколкото остарялото таблично оформление. Често се случва дизайнът на сайта да е уникален и разпознаваем. Но за такъв изключителен трябва да платите с липса на свободно пространство.
Това е особено вярно начална страница, разходите за реклама на които са най-високи. Следователно възниква проблемът къде да „бутнем“ друг рекламен банер. И тук не можете да се измъкнете с подравняване на div към центъра на страницата!
По-рационално решение е да направите някакъв блок скрит. Ето прост пример за такова изпълнение:
#layer1( display:block; width: 500px; height: 100px; background: rgb(51,255,204); border:groove; ) function show() ( if(layer1=="none") ( layer1="block"; ) else ( слой1="няма"; ) document.getElementById("слой1").style.display=слой1 )
Това е магическият бутон. Щракването върху него ще скрие или покаже скриващия се блок.
Много често при оформлението е необходимо някой елемент да се центрира хоризонтално и/или вертикално. Затова реших да направя статия с по различни начиницентриране, така че всичко да е под ръка на едно място.
Поле за хоризонтално подравняване: автоматичноХоризонталното подравняване с марж се използва, когато ширината на центрирания елемент е известна. Работи за блокови елементи:
Elem ( margin-left: auto; margin-right: auto; width: 50%; )
Задаването на auto за дясното и лявото поле ги прави равни, което центрира елемента хоризонтално в рамките на родителския блок.
подравняване на текст: центърТози метод е подходящ за центриране на текст в блок. подравняване на текст: център:
Подравняване с text-align .wrapper ( text-align: center; )
Централно съм подравнен
позиция и отрицателно поле влявоПодходящ за центриране на блокове с известна ширина. Даваме позиция на родителския блок: спрямо позицията спрямо него, позицията на центрирания елемент: абсолютна, ляво: 50% и отрицателно поле отляво, чиято стойност е равна на половината от ширината на елемента:
Подравняване с позиция .wrapper (позиция: относителна; ) .wrapper p ( ляво: 50%; марж: 0 0 0 -100px; позиция: абсолютна; ширина: 200px; )
Централно съм подравнен
дисплей: inline-block + text-align: centerМетодът е подходящ за подравняване на блокове с неизвестна ширина, но изисква обвиващ родител. Например можете да центрирате хоризонтално меню по следния начин:
Подравняване с дисплей: inline-block + text-align: center;
За автораВертикално подравняване височина на линията
За да подравните един ред текст, можете да използвате същата височина и стойности за разстояние между редовете за родителския блок. Подходящ за бутони, елементи от менюто и др.
line-height .wrapper (височина: 100px; line-height: 100px;)
Аз съм вертикално подравненпозиция и отрицателен марж нагоре
Елемент може да бъде подравнен вертикално, като му се даде фиксирана височина и се приложи позиция: абсолютна и отрицателна граница нагоре, равна на половината от височината на елемента, който се подравнява. На родителския блок трябва да се даде позиция: относителна:
Обвивка (позиция: относителна;) елемент (височина: 200px; марж: -100px 0 0; позиция: абсолютна; горна: 50%;)
По този начин, използвайки позициониране и отрицателни полета, можете да центрирате елемент на страницата.дисплей: клетка-таблица
За вертикално подравняване свойството display: table-cell се прилага към елемента, което го принуждава да емулира клетка от таблица. Също така задаваме неговата височина и vertical-align: middle . Нека увием всичко това в контейнер със свойството dislpay: table; :
line-height .wrapper (височина: 100px; line-height: 100px;)
Вертикално подравняване дисплей: table-cell .wrapper ( display: table; width: 100%; ) .cell ( display: table-cell; height: 100px; vertical-align: middle; )Динамично подравняване на елемент на страница Разгледахме начини за подравняване на елементи на страница, когато CSS помощ
. Сега нека да разгледаме реализацията на jQuery.
Нека свържем jQuery към страницата: Предлагам да пишапроста функция
центриране на елемент на страницата, нека го наречем alignCenter(). Самият елемент действа като аргумент на функцията:
Функция alignCenter(elem) ( // код тук ) В тялото на функцията ще изчислим динамично и ще зададем координатите на центъра на страницата CSS свойства
ляво и горе:
Функция alignCenter(elem) ( elem.css(( ляво: ($(window).width() - elem.width()) / 2 + "px", горе: ($(window).height() - elem. височина()) / 2 + "px" // не забравяйте да добавите позиция: абсолютна към елемента, за да задействате координати )) )
В първия ред на функцията получаваме ширината на документа и изваждаме от него ширината на елемента, разделена наполовина - това ще бъде хоризонталният център на страницата. Вторият ред прави същото, само с височина за вертикално подравняване.
$(function() ( // извикване на функцията за центриране, когато DOM е готов alignCenter($(elem)); // извикване на функцията при преоразмеряване на прозореца $(window).resize(function() ( alignCenter($(elem) )); )) // функция за центриране на елемент alignCenter(elem) ( elem.css(( // изчисляване на леви и горни координати вляво: ($(window).width() - elem.width()) / 2 + " px", отгоре: ($(window).height() - elem.height()) / 2 + "px" )) ) ))
Приложение на FlexboxНови функции на CSS3, като Flexbox, постепенно стават нещо обичайно. Технологията помага за създаване на маркиране без използване на плаващи елементи, позициониране и т.н. Може да се използва и за центриране на елементи. Например, приложете Flexbox към родителския element.wrapper и центрирайте съдържанието вътре:
Обвивка ( дисплей: -webkit-box; дисплей: -moz-box; дисплей: -ms-flexbox; дисплей: -webkit-flex; дисплей: flex; височина: 500px; ширина: 500px;) .wrapper .content ( margin: /* марж: 0 авто; само хоризонтално */ /* марж: само вертикално */ ) Lorem ipsum sit amet
Това правило центрира елемента хоризонтално и вертикално едновременно - margin вече работи не само за хоризонтално подравняване, но и за вертикални. И без известна ширина/височина.
Свързани ресурси Помогнете на проекта
