Рассматриваются различные способы выравнивания и центрирования в зависимости от расположения.Вы можете сделать по центру сайт,сделать по центу меню,блок,слайдер,картинку,ссылку и все остальные элементы.Способы позиционирования актуальнее производить используя Справочник 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>
0 коммент.:
Отправить комментарий