Выравнивание с относительным и абсолютным расположением
Как я мог центрировать синее поле в красном? Я вижу, что левая сторона синего поля точно посреди красного поля, но я хотел бы центрировать целое синее поле, не его левую сторону. Размеры полей не являются постоянными. Я хочу выровняться независимо от размеров полей. Пример для проигрывания со здесь. Спасибо!
HTML:
Why I'm not centered ?
CSS:
#rel {
position: relative;
top: 10px;
left: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center;
}
#abs {
position: absolute;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
}
4 ответа
Если вы можете изменить тег , тогда этот фрагмент CSS должен работать. Я думаю, что лучше использовать больше автоматизации для закрытого бокса, так как при изменении размера контейнерного бокса потребуется меньше изменений. на <div id="rel">
<div id="abs">Why I'm not centered ?</div>
</div>
#rel {
position: absolute;
top: 10px;
left: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center; }
#abs {
width: 300px;
height: 200px;
border: 1px solid blue;
margin: auto;
margin-top: 50px; }
Вы можете добавить left:50px в #abs, если это все, что вам нужно...
#abs {
position: absolute;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
left:50px;
}
Если вы собираетесь задать такие размеры (200px x 300px и 300px x 400px), вот как это можно отцентрировать:
#rel {
position: relative;
top: 10px;
left: 20px;
width: 400px;
height: 300px;
border: 1px solid red;
text-align: center;
}
#abs {
position: absolute;
width: 300px;
height: 200px;
border: 1px solid blue;
margin: 49px 0 0 49px;
}
Это должно работать
#abs {
position: absolute;
left: auto;
right: auto;
bottom: 15px;
width: 300px;
height: 200px;
border: 1px solid blue;
}