#html #css
#HTML #css — код
Вопрос:
Вот HTML-код, который у меня есть:
<div id="top">
<span id="title">Some Title</span>
<span id="buttons"><button>Bla</button><button>Foo</button></span>
</div>
Какой CSS использовать для центрирования #title и #buttons размещения с правой стороны?
Комментарии:
1. В соответствии с двумя ответами (на момент написания этой статьи) было бы полезно уточнить, хотите ли вы, чтобы заголовок был просто центрирован внутри «top» (прямо посередине, независимо от того, какие кнопки там есть), или если вы хотите, чтобы он был центрирован в пространстве, оставшемся после возможного добавления кнопок.
Ответ №1:
Установить #title значение display:block; margin:auto;
Установить #top значение position:relative; или position:absolute;
Установить #buttons значение position:absolute; top:0; right:0;
Комментарии:
1. Абсолютное позиционирование на двух разных элементах — плохое решение для чего-то, чего можно достичь с помощью floating.
2. Плавающий не удаляет кнопки из потока документов, что приводит к конфликту с его желанием центрировать заголовок. Каково ваше решение?
3. @minitech позиционирование и плавающее — одинаково хорошие решения.
Ответ №2:
Это может быть css для вашей проблемы. Проверьте это.
#top
{
text-align:center;
}
#buttons
{
float:right;
}
Комментарии:
1. Согласно комментарию Джека в его ответе: это не центрирует заголовок внутри #top, а скорее в пространстве ширины #top минус ширина, занимаемая #buttons .