Центр вирівнювання проміжку HTML не працює?

107

У мене є HTML:

<div align="center" style="border:1px solid red">
This is some text in a div element!
</div>

Div змінює пробіли в моєму документі, тому я хочу використовувати для цього проміжок.

Але "span" не централізує вміст:

<span style="border:1px solid red;align=center">
This is some text in a div element!
</span>

Як це виправити?

Редагувати:

Мій повний код:

<html>
<body>

<p>This is a paragraph. This text has no alignment specified.</p>

<span style="border:1px solid red;text-align=center">
  This is some text in a div element!
</span>

</body>
</html>

html css

— Давид19801
джерело

1

Ваш дів "змінює інтервал"? Що ви маєте на увазі під цим? І ваш проміжок не буде, тому що за замовчуванням це вбудований елемент, тоді як div - елемент рівня блоку .

— Bojangles

Привіт JamWaffles, Під "пробілом" я маю на увазі, що div додає пробіл над і під вмістом. Проміжок цього не робить.

— David19801

Скористайтеся Firebug або інспектором Chrome, щоб побачити, які правила CSS застосовуються до вашого елемента, і шукайте той, який додає набивання чи запас. Можливо також, що навколишні елементи мають прокладку / запас.

— Bojangles

5

text-align=centerмає бутиtext-align:center

— n611x007

197

Div є блоковим елементом і охоплюватиме ширину контейнера, якщо не встановлена ширина. Проміжок є вбудованим елементом і матиме ширину тексту всередині нього. На даний момент ви намагаєтеся встановити вирівнювання як властивість CSS. Вирівняти - це атрибут.

<span align="center" style="border:1px solid red;">
    This is some text in a div element!
</span>

Однак атрибут вирівнювання застарілий. Ви повинні використовувати text-alignвластивість CSS на контейнері.

<div style="text-align: center;">
    <span style="border:1px solid red;">
        This is some text in a div element!
    </span>
</div>

— Буде
джерело

47

Будь ласка, використовуйте наступний стиль. margin:autoзазвичай використовується для центру вирівнювання вмісту. display:tableпотрібен для spanелемента

<span style="margin:auto; display:table; border:1px solid red;">
    This is some text in a div element!
</span>

— Кріс Дж
джерело

37

alignАтрибут є застарілим. Використовуйте text-alignзамість CSS . Також проміжок не буде центрувати текст, якщо ви не використовуєте display:blockабо не display:inline-blockвстановите значення для ширини, але тоді він буде поводитись так само, як і div (блок-елемент).

Чи можете ви розмістити приклад свого макета? Використовуйте www.jsfiddle.net

— Люцифер Сем
джерело

Працювали чудово! Дякую.

— dallinchase

Чи не можу я вирівняти два вбудованих елемента по-різному, зберігаючи їх вбудованими елементами?

— Даніель Спрінгер

11

span.login-text {
    font-size: 22px;
    display:table;
    margin-left: auto;
    margin-right: auto;
}

<span class="login-text">Welcome To .....CMP</span>

Для мене це працювало дуже добре. спробуйте і це

— ЦІЛЬНІ
джерело

2

На додаток до всіх інших пояснень, я вважаю, що ви використовуєте "="знак рівності замість двокрапки ":":

<span style="border:1px solid red;text-align=center">

Вона повинна бути:

<span style="border:1px solid red;text-align:center">

— nhazean
джерело

1

Проміжок є вбудованим блоком і налаштовується під розмір вбудованого тексту із завзятістю, яка блокує більшість зусиль для стилю поза вбудованого контексту. Щоб спростити стиль макета (обмежити конфлікти), додайте div до тегу 'p' з розривом рядка.

<p> some default stuff
<br>
<div style="text-align: center;"> your entered stuff </div>

— марка Стюарт
джерело

-7

Просто використовуйте word-wrap:break-word;в css. Це працює.

— пн
джерело