Разница между <span> и <div> с помощью text-align: center;?

Ответ 1

разница не находится между <span> и <div> в частности, но между элементами inline и block. <span> по умолчанию display:inline;, тогда как <div> по умолчанию имеет значение display:block;. Но они могут быть переопределены в CSS.

Разница в способе text-align:center работает между двумя, вплоть до ширины.

A block по умолчанию является шириной его контейнера. Он может иметь ширину, установленную с помощью CSS, но в любом случае это фиксированная ширина.

Элемент inline берет свою ширину от размера текста своего содержимого.

text-align:center указывает, что текст позиционируется по центру в элементе. Но в элементе inline это явно не будет иметь никакого эффекта, потому что элемент имеет ту же ширину, что и текст; выравнивание его так или иначе бессмысленно.

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

Наконец, решение для вас:

Существует дополнительное значение для свойства display, которое предоставляет дом с половинным шагом между block и inline. Достаточно удобно, что он называется inline-block. Если вы укажете <<span> display:inline-block; в CSS, он будет продолжать работать как встроенный элемент, но также возьмет на себя некоторые свойства блока, например, возможность указать width. Когда вы укажете ширину для него, вы сможете центрировать текст в пределах этой ширины, используя text-align:center;

Надеюсь, что это поможет.

Ответ 2

Как и другие, span - это встроенный элемент.

Смотрите здесь: http://www.w3.org/TR/CSS2/visuren.html

Кроме того, вы можете сделать span, как div, используя

style="display: block; margin: 0px auto; text-align: center;"

Ответ 3

Пролисты inline, div - элементы блока. то есть пролеты имеют только ширину, соответствующую их соответствующему контенту. Вы можете выровнять диапазон внутри окружающего контейнера (если это контейнер контейнера), но вы не можете выровнять содержимое.

Span используется в основном для форматирования. Если вы хотите упорядочить или разместить содержимое, используйте div, p или какой-либо другой элемент блока.

Ответ 4

Тег span настолько же широк, как и его содержимое, поэтому нет "центра" тега span. Нет свободного места по обе стороны от содержимого.

Тег div, однако, настолько же широк, как и его содержащий элемент, поэтому содержимое этого div может быть центрировано с использованием любого дополнительного пространства, которое не будет занимать контент.

Итак, если ваш div имеет ширину 100 пикселей, а ваше содержимое занимает только 50 пикселей, браузер разделит оставшиеся 50 пикселей на 2 и поместит 25 пикселей по каждой стороне вашего контента, чтобы центрировать его.

Ответ 5

Span считается встроенным элементом. Как таковой в основном ограничивает себя содержимым внутри него. Это более или менее прозрачно.

Подумайте, что это имеет поведение тега 'b'.

Он может быть выполнен как < span style = 'font-weight: bold;' > полужирный текст </span>

div является блочным элементом.

Ответ 6

Это может быть так, потому что ваши элементы элемента span имеют ширину в ширину, как и ее содержимое. если у вас есть div с шириной 500 пикселей и центром выравнивания текста, и вы вводите тег span, он должен быть выровнен по центру. Таким образом, ваша проблема может быть одной из CSS. Установите Firebug в Firefox и проверьте атрибуты стиля, которые имеют ваш объект span или div.