нуждаюсь в помощи CSS, центрирующийся с абсолютным расположением
Важно знать не только типы, но и сопоставление этих типов с типами базы данных:
Источник добавлен - Agile Web Development с Rails 4
7 ответов
Свойство text-align: center; выполняет то же, что и , и значительно превосходит его.
Только вот это немного сложнее в использовании. Как только вы освоите его, вы задаетесь вопросом, почему у вас было столько проблем раньше!
Вы должны использовать его в соответствии со свойствами других элементов на странице. Это проблема разработчиков / дизайнеров с CSS и новыми технологиями HTML. Это дает нам мощный способ представления элементов нашей страницы, но делает его гораздо более сложным и строгим.
Ответ Майка Робинсона, безусловно, решает проблему, с которой вы столкнулись, и это отличный пример. Но ...
Я не думаю, что какой-то один ответ покажет вам, как правильно использовать text-align во всех случаях, когда вы »
body { text-align: center; }
#wrapper { width: 960px; margin: 0 auto; text-align: left; position: relative; }
#wrapper .child { position: absolute; left: 0; top: 0; }
Просто пример кода, но любой элемент .child будет находиться на 0,0 оболочки
Любой абсолютно позиционированный элемент будет абсолютно позиционирован относительно его ближайшего родителя относительно позиции. Если элемент не имеет родителя с относительной позицией, он просто использует документ. Ниже приведен пример без классов (для ясности добавлены некоторые стили цвета и ширины).
<html>
<body style="text-align: center;">
<div style="position: relative; width: 100px; height: 100px; margin: 0 auto; background: red;">
<div style="position: absolute; left: 0; top: 0;">
This will absolutely position relative to the container div.
</div>
</div>
<div style="position: absolute; left: 0; top: 0; width: 100px; height: 100px; background: blue;">
This will absolutely position relative to the document
</div>
</body>
</html>
Хороший способ центрировать материал - использовать тег CSS "margin: auto". Это работает в FF и Safari. Просто дайте div некоторую ширину и поле auto, и если родительский элемент имеет ширину 100%, тогда этот div будет выравниваться по центру.
Чтобы это работало в IE, вы должны использовать атрибут text-align: center для родительского элемента, а затем text-align left для фактического центрированного div.
AFAIK, нет способа изменить абсолютное co -координаты от 0,0 до некоторой другой точки. Относительный - лучший способ.
Если вы придерживаетесь position: absolute; , тогда установите div, относительно которого вы хотите расположить объекты, чтобы иметь position: relative; чтобы включить его в контекст позиционирования для любых дочерних элементов.
Чтобы центрировать абсолютно позиционированный div, вам нужно знать его ширину, а затем использовать следующий CSS:
#wrapper {
width: 800px;
margin: 0 auto;
position: relative; /* creates a positioning context for child elements */
}
#child {
position: absolute;
width: 400px;
left: 50%;
margin-left: -200px;
}
И HTML:
<div id="wrapper">
<div id="child">
....
</div>
</div>
Вы можете настроить ширину и левое поле по мере необходимости (отрицательное левое поле должно составлять половину ширины центрируемого блока div, например. #child .
Как уже упоминалось другими людьми, использование margin: 0 auto ; на элементе с установленной шириной будет центрировать его.
возможно я не понял задачу, но я думаю, что вы можете использовать
margin: 0 auto;
для центрирования вашего divs
Используйте относительное позиционирование на родительском элементе и присвойте этому же элементу свойство:
margin: 0 auto;
Теперь родительский элемент позиционируется, и вы должны иметь возможность устанавливать элементы абсолютно внутри него.
Пример:
div#page{
position:relative;
width:400px;
margin:0 auto;
}
div#page #absoluteExample{
position:absolute;
top:18px;
left:100px;
}
Разве вам не нужно относительное позиционирование, если 0,0 будет относительно div?