Разработка сайта для Вашего бизнеса. Веб дизайн. Дизайн логотипа, фирменного стиля, рекламная фотография . Комплексный рекламный креатив.

Ralex. We do the work.
На рынке с 1999го года. Средняя ценовая категория. Ориентация на эффективность решений.
Ознакомтесь с нашим портфолио
Узнайте больше о услугах
Свяжитесь с нами:
E-mail: [email protected]
Tel: (044) 587 - 84 - 78
Custom web design & дизайн и разработка сайта "под ключ"
Креативный, эффективный дизайн. Система управления сайтом (СУС).
Custom flexible разработка систем электронной коммерции
Система e-commerce разрабатывается под индивидуальные потребности. Гибкая функциональность.
Search Engine Optimzation & оптимизация под поисковые системы (SEO)
Постоянная оптимизация и мониторинг сайта в поисковых системах. Достигаем результата быстро и эффективно
Custom logo design & дизайн логотипа и фирменного стиля
Многолетний опыт. Огромное портфолио. Уникальное предложение и цена.
профессиональная рекламная фотография
креативно, смело, качественно
Custom logo design & рекламный креатив. дизайн рекламы
Многолетний опыт. Огромное портфолио. Уникальное предложение и цена.

Вирівнювання блоків по центру в CSS

  1. Приклад вирівнювання div-блоку
  2. Приклад вирівнювання пунктів меню
Версія для друку

Наша взаимовыгодная связь https://banwar.org/

Вирівнювання вмісту по горизонталі, яке має властивість float, можна зробити дуже легко і крім того повністю кросбраузерності (працює в Opera 8+, Firefox 3+, IE 5.5+).

Приклад вирівнювання div-блоку

Щоб вирівняти блок з властивістю float або кілька розташованих в ряд блоків, необхідний ще один зовнішній блок. Зовнішнього блоку і внутрішнім блокам призначається position: absolute; і float: left ;, зовнішньому призначити left: 50% ;, а внутрішнім блокам right: 50% ;. Для використання float: right; потрібно призначити зовнішньому призначити right: 50% ;, а внутрішнім блокам left: 50% ;. Рекомендую очищати float, розміщуючи після вирівняні по центру елементів блок з властивістю clear: both ;.

Таким чином можна домогтися такого центрування:

Таким чином можна домогтися такого центрування:

Кордон зеленого кольору має внутрішній блок з id = block-inner, переривчасту червону кордон має зовнішній блок з id = block.

HTML-код прикладу зображеного нижче виглядає так:

<Div id = "page"> <div id = "block"> <div id = "block-inner"> Вміст блоку </ div> </ div> </ div>

CSS-код прикладу зображеного нижче виглядає так:

#block {position: relative; float: left; left: 50%; border: 1px dashed # a00; } # Block-inner {position: relative; float: left; right: 50%; border: 2px solid # 0a0; padding: 10px; } #Page {overflow: hidden; }

Приклад вирівнювання пунктів меню

Практично даний вище приклад можна застосувати при горизонтальному вирівнюванні меню сайту. Однак, при цьому потрібно взяти до уваги те, що при досить великій кількості пунктів (які займають по ширині більше половини сторінки) з'являється горизонтальна прокрутка. Щоб її позбутися потрібно в зовнішньому блоці застосувати властивість overflow. Якщо меню, що випадає, то його випадають пункти можуть зрізати цим зовнішнім блоком. Щоб уникнути цієї проблеми, необхідно застосовувати властивість overflow до блоку якомога більше осяжний, наприклад, самому зовнішньому блоку, що обрамляє весь вміст сторінки.

Наприклад можна вирівняти меню так:

Наприклад можна вирівняти меню так:

Кордон зеленого кольору мають пункти li списку ul, переривчасту червону кордон має список ul.

HTML-код прикладу зображеного нижче виглядає так:

<Div id = "page"> <ul id = "menu"> <li> <a href="#"> вирівняні пункт 1 </a> </ li> <li> <a href="#"> вирівняні пункт 2 </a> </ li> <li> <a href="#"> вирівняні пункт 3 </a> </ li> <li> <a href="#"> вирівняні пункт 4 </a> </ li> <li> <a href="#"> вирівняні пункт 5 </a> </ li> </ ul> </ div>

CSS-код прикладу зображеного нижче виглядає так:

#menu {position: relative; float: left; left: 50%; border: 1px dashed # a00; list-style: none; margin: 0; padding: 0; } #Menu li {position: relative; float: left; right: 50%; border: 2px solid # 0a0; padding: 10px; } #Page {overflow: hidden; }

Так що все досить просто. Бажаю успіхів в освоєнні нових методів.

Категории
  • Биология
  • Математика
  • Краеведению
  • Лечебная
  • Наука
  • Физике
  • Природоведение
  • Информатика
  • Новости

  • Новости
    https://banwar.org/
    Наша взаимовыгодная связь https://banwar.org/. Запустив новый сайт, "Пари Матч" обещает своим клиентам незабываемый опыт и возможность выиграть крупные суммы.


    Наши клиенты
    Клиенты

    Быстрая связь

    Тел.: (044) 587-84-78
    E-mail: [email protected]

    Имя:
    E-mail:
    Телефон:
    Вопрос\Комментарий: