Разница между <span>и <div>с выравниванием текста: center ;?

Question

Я не понимаю этого:

Я пытался центрировать выравнивание текста тега HTML <span>, но ничего не получилось ... С тегом <div> все работало.То же самое с настройкой margin: 0px auto; в css.

Почему тег span не поддерживает функцию text-align;?

Answer 1

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

Разница в том, как работает text-align:center, сводится к ширине.

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

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

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

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

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

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

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

Answer 2

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

См. Здесь: http://www.w3.org/TR/CSS2/visuren.html

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

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

Answer 3

Тэг span имеет такую ​​же ширину, как и его содержимое, поэтому «центра» тэга span нет.С обеих сторон содержимого нет свободного места.

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

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

Answer 4

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

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

Answer 5

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

Answer 6

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

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

Это может быть выполнено как жирный текст

div - это блочный элемент.