В CSS несколько свойств можно использовать для выравнивания элементов по горизонтали.
Выровнять по центру - Использование margin
Установка ширины элемента уровня блока будет препятствовать его от растягивания к краям его контейнера. Используйте margin: auto; к центру по горизонтали элемент внутри контейнера.
Элемент будет занимать заданную ширину, а остальное пространство будет разделено поровну между двумя полями:
пример
.center
{
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
} Попробуй сам " Совет: Центр выравнивания не имеет никакого эффекта , если width свойство не установлено (или установлена на 100%).
Совет: Для выравнивания текста см CSS Текст главы.
Левая и правая Align - Использование position
Один из способов выравнивания элементов заключается в использовании position: absolute; :
пример
.right
{
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
} Попробуй сам " Примечание: Абсолютные позиционируемые элементы удаляются из нормального потока, и может перекрывать элементы.
Совет: При выравнивании элементов с position , всегда определяют margin и padding для <body> элемента. Это позволяет избежать визуальных различий в разных браузерах.
Существует также проблема с IE8 и ранее, при использовании position . Если контейнер элемент (в нашем случае <div class="container"> ) имеет заданную ширину и !DOCTYPE Декларация отсутствует, IE8 и более ранние версии добавит 17px margin на правой стороне. Это, кажется, пространство, зарезервированное для скроллинга. Таким образом, всегда устанавливайте !DOCTYPE декларацию при использовании position :
пример
body
{
margin: 0;
padding: 0;
}
.container
{
position: relative;
width: 100%;
}
.right
{
position: absolute;
right: 0px;
width: 300px;
background-color: #b0e0e6;
} Попробуй сам " Левая и правая Align - Использование float
Другой способ выравнивания элементов заключается в использовании float свойство:
пример
.right
{
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
} Попробуй сам " Совет: При выравнивании элементов с float , всегда определить margin и padding для <body> элемента. Это позволяет избежать визуальных различий в разных браузерах.
Существует также проблема с IE8 и ранее, при использовании float . Если !DOCTYPE Декларация отсутствует, IE8 и более ранние версии добавит 17px margin на правой стороне. Это, кажется, пространство, зарезервированное для скроллинга. Таким образом, всегда устанавливайте !DOCTYPE декларацию при использовании с float :
пример
body
{
margin: 0;
padding: 0;
}
.right
{
float: right;
width: 300px;
background-color: #b0e0e6;
} Попробуй сам "