Сделать по центру | Варианты примеров - Справочник CSS3 | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Воскресенье, 04.12.2016
Главная » Справочник CSS3 » Полезные статьи


2D & 3D ТрансформацияСвойства контента
Свойства импортаСвойства углов
Свойства границСвойства анимации
ПсевдоклассыПсевдоэлементы
Свойства размераСвойства контура
Свойства переходаСвойства печати
Свойства тениСвойства отступов
Свойства текстаСвойства колонок
Свойства полейПозиционирование
Свойства интерфейсаТипы значений
Полезные статьиСвойства списка
Свойства шрифтаСвойства таблицы
Свойства фонаВендорные префиксы



Адаптивный сайт - aTmpl


Сделать по центру | Варианты примеров

Способы выравнивания объектов и элементов по центру




Рассматриваются различные способы выравнивания и центрирования в зависимости от расположения.Вы можете сделать по центру сайт,сделать по центу меню,блок,слайдер,картинку,ссылку и все остальные элементы.Способы позиционирования актуальнее производить используя Справочник CSS3.Разумеется изучать свойства более чем 200 элементов входящих в справочник не очень то и хочется.Дополнительно ситуации находящиеся в пространстве выделяемом элементу могут быть самыми разными,всё зависит от условий в которые были помещены предшественники.Подберите способ именно для Вашего случая,для проверки примеров используйте Редактор HTML - OnLine для сайта который находится в нижней части материала.Если Ваш уникальный случай не позволяет воспользоваться выравниванием предложенным в примерах ниже,поведайте о нём в комментарии,не забывайте при этом вносить в описание имеющийся код.




Сделать по центру

Устанавливаем по центру используя Свойства таблицы

В этом примере внешние отступы от элемента устанавливает свойство margin.Используются 2 значения ( через пробел ) которые устанавливают:
1.Значение - 0 - Внешние отступы от верхней и нижней части равны нулю.
2.Значение - auto - Внешние отступы с права и лева доверяем определить браузеру,он разумеется долго не думая установит равное значение исходя из условий в котрых просматривается страница пользователем.


<table style="margin:0 auto;">
<tr>
<td>
Здесь Ваш элемент
</td>
</tr>
</table>

Здесь ситуация меняется,добавлется свойство width устанавливающая ширину Вашего элемента.Он приобретёт значительно больше прав для расположения,применяется в установке по центру шаблонов сайтов системы uCoz.Если ширина элемента неизвесна,можно использовать значение приблизительное,ориентируясь по состоянию того же меню или слайдера.


<table style="margin:0 auto;width:200px;">
<tr>
<td>
Здесь Ваш элемент
</td>
</tr>
</table>


Устанавливаем по центру используя Блочный элемент

Самым распространённым и подходящим для позиционирования блочным элементом является тег <div>,им можно управлять аналогично таблице.Основным требованием более точного расположения остаётся наличие свойства ширины с установленным значением


<div style="margin:0 auto;width:100px;">
Здесь Ваш элемент
</div>

Для расположения по середине просто текста достаточно применить свойство text-align


<div style="text-align:center;">
Здесь Ваш текст
</div>

Если нужно расположить блок не по центру,а в центе экрана,делаем следующее,создаём три блочных элемента 2 из которых будут работать направляющими 1 среднего блока.
1.Первый блок должен иметь 50% высоты,при этом нужно добавить свойство margin-bottom и задать ему отрицательное значение,равное половине используемой в центральном блоке.То есть если высота блока находящегося по середине 500 пикселов значит указывайте значение -250px.
2.Второй блок находится по середине и является элементом имеющим значения ширины и высоты,значение ширины можно использовать в процентном соотношении.Добавляем к основному блоку свойство clear для разделения и устанавливаем значение высоты в свойстве height + значение ширины для свойства width,Это основные свойства позиционирования блока,остальные для визуального отражения.
3.Третий блок является аммортизатором предыдущих блоков,в нём свойству top указывающему положение от верхней части предыдущих блоков и свойству bottom указывающему положение от нижней части устанавливаем по 1\4 от высоты нашего элемента который находится по центру.Например если высота Вашего блока 600px значит свойства top и bottom должны иметь по 150px.
Это логический сценарий для работы свойства position.


<div style="height:50%;margin-bottom:-100px;position:relative;">
</div>
<div style="clear:both; margin:0 auto;height:200px;background-color:transparent;border:2px solid #222;width:60%;">
Здесь будет находится любой элемент(ы) которому нужно прописывать индивидуальные свойства.</div>
<div style="position:relative;top:-50px;bottom:-50px;height:auto;">
</div>


Редактор HTML для проверки кодов из примеров

Вставьте примеры в поле редактора,проверьте и заодно поэкспериментируйте сосвоими значениями.Можете пробовать вставлять именно Ваш объект нуждающийся в установке по центру




Русские шрифты





Категория: Полезные статьи | Добавил: IZOTOP (30.11.2012) | Автор: Меренков Михаил W
Просмотров: 10013 | Теги: середине, uCoz, сделать, центру, element, center, block, установить | Рейтинг: 0.0/0

Вопросов / Советов / Предложений - относящихся к материалу: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]