Css вертикално подравняване за всички, CSS

подравняване Вертикален текст в CSS - много трудна работа. Виждал съм достатъчно хора се борят с това, и това ги идентифицира "критични" грешки, когато става дума за реално адаптивен дизайн.

Говорете за CSS вертикално подравняване на имот

Когато започнах да работя в уеб програмиране, а след това малко по-трудно с този имот. Мислех, че тя трябва да работи като класически собственост "текст подравняване". Ах, ако само да беше толкова просто.

CSS собственост вертикално подравняване работи перфектно с маси, но не и с DIV или други елементи. Когато го използвате за DIV. задействано елемент в сравнение с другите блокове, но не и съдържанието. Когато тази функция работи само с дисплей: инлайн блок; ,

Искаме да центрирате съдържанието, а не DIV!

Имате две възможности за избор. Ако имате само един DIV елемент с текст, можете да използвате имота на линия височина. Това означава, че трябва да знаете височината на елемента, но това не може да се инсталира. По този начин, вашият текст ще бъде винаги в центъра.

Вярно е, че този подход CSS вертикално подравняване има и недостатък. Ако няколко реда текст, тогава височината на линията ще се умножава по броя на редовете. Най-вероятно, в този случай, ще трябва да наложи ужасно страница.

Обърнете внимание на този пример

Ако съдържанието, което искате да центрирате, се състои от повече от един ред, то тогава е по-добре да използвате таблица Разделение. Можете да използвате и на масата, но това не е семантично правилен. Ако имате нужда от почивка за адаптационни цели, по-добре е да използвате Разделение елементи.

За да стане това, тя трябва да бъде основния съдържател за показване: маса. и вътре в нея - желания брой колони, които искате да се приведе в съответствие с помощта на дисплея: маса-клетка и вертикално подравняване: средна.

Защо се работи с оформлението на маса, но с елементи на DIV. Тъй като височината на редове в една и съща маса. Когато съдържанието на клетка от таблица не използва цялата налична пространството във височина, браузърът автоматично ще добави вертикално запълване да се приведе в съдържанието.

Имотът на позиция

Имайте предвид, че някои свойства (топ и Z-индекс) работят само ако позицията на стойността на елемента, определен (не е статичен).

Нека да се залавяме за работа!

Вие искате да приложат CSS Alignment Вертикална Center. Първо, създаване на елемент с относителната позиция и размер. Например: 100% за ширина и височина.

Втората стъпка може да бъде различен в зависимост от целевите браузъри, но може да се използва един от двата варианта:

• Стари собственост. Трябва да знаете точния размер на прозореца, за да се отстрани половината от ширината и половината от височината. Вижте пример;
• Нов имот CSS3. можете да добавите превърне имота на стойност от 50% и превежда на блока ще бъде винаги в центъра. Вижте извадка.

По принцип, ако искате да центрирате съдържанието, никога не използвайте върха: 40% или наляво: 300px. Той работи чудесно на екрана на тест, но това не е за центриране.

Не забравяйте позиции: фиксиран. Можете да правите с него е същата като на абсолютна позиция, но вие не се нуждаете от относителното положение на майка елемент - той винаги ще се позиционира спрямо прозореца на браузъра.

Чували сте за спецификация flexbox?

Можете да използвате flexbox. Това е много по-добре от всеки друг вариант на CSS текст приведе в съответствие центъра по вертикала. С управлението на flexbox елемент наподобява детска игра. Проблемът е, че трябва да се откажа от някои браузъри като Internet Explorer 9 и версия по-долу. Ето един пример за това, как да се вертикално подравняване на устройството:

Използването на място flexbox, няколко единици могат да бъдат центрирани.

Ако приложите това, което сте научили от тези примери, ще научите единица CSS подравняване вертикално възможно най-скоро.

Референции и допълнителна литература

Проучване CSS маркиране

Превод на статията "CSS Вертикално подравняване за всички (Dummies включени)" е изготвен от екип на приятелски Уеб дизайн проект от А до Я.