Возникли проблемы с получением текста по центру

0

Хорошо, я работаю над настраиваемым парсером для личного варианта языка разметки креолов, и у меня возникают проблемы с добавленным мной макросом, который центрирует текст.

Учитывая следующий код CSS:

.boxsection {
    text-align:left;
    border:1px solid #333;
    padding:10px;
    margin:10px;
    background:1px solid #ccc;
}

и следующий код HTML, выводимый синтаксическим анализатором:

<div class='boxsection'>
    <span style='text-align:center'>
        <h4>Center</h4>
        <pre>&lt;&lt;center&gt;&gt;Some text in the middle&lt;&lt;/center&gt;&gt;</pre>
        This macro causes the content inside of it to be centered.
    </span>
</div>

Заголовок и текст в блоке все центрируются, но последняя строка не сосредоточена вообще, хотя она находится внутри пролета. Я попытался изменить диапазон на другой div, с дисплеем, установленным в строку, но это не сработало.

Единственное, что работает, - это использовать тег, но этот тег устарел, поэтому я бы предпочел не использовать решение, которое может перестать работать в будущем обновлении браузера.

Изменить: я загрузил небольшую HTML-страницу, которая демонстрирует проблему: http://www.wuala.com/zauber.paracelsus/Public/centering_test.html/

Теги:
center

1 ответ

1
Лучший ответ

Это связано с тем, что ваш HTML недействителен.

Вы не можете добавлять элементы со стандартным display:block в элементы, которые по умолчанию display:inline.

Измените свой span на div и он будет работать.

HTML

<div class='boxsection'>
  <h4>Center</h4>
  <pre>&lt;&lt;center&gt;&gt;Some text in the middle&lt;&lt;/center&gt;&gt;</pre>
  This macro causes the content inside of it to be centered.
</div>

CSS

.boxsection {
  text-align:center;
  border:1px solid #333;
  padding:10px;
  margin:10px;
  background:1px solid #ccc;
}

http://codepen.io/Chovanec/pen/Hyxqe

  • 0
    Хорошо спасибо. Это работает, хотя я не знаю, почему я добавил блок: display к стилю, когда я изменил его на div. Я предполагал, что без этого не получится.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню