HTML выравнивание по центру не работает? - PullRequest
Новая
       2

HTML выравнивание по центру не работает?

95 голосов
/ 06 декабря 2011

У меня есть некоторый 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>

Ответы [ 7 ]

176 голосов
/ 06 декабря 2011

Div - это блочный элемент, который будет охватывать ширину контейнера, если ширина не задана.Интервал является встроенным элементом и будет иметь ширину текста внутри него.В настоящее время вы пытаетесь установить выравнивание как свойство CSS.Выравнивание является атрибутом. 

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

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

<div style="text-align: center;">
    <span style="border:1px solid red;">
        This is some text in a div element!
    </span>
</div>
41 голосов
/ 19 августа 2013

Пожалуйста, используйте следующий стиль.margin:auto обычно используется для выравнивания по центру содержимого.display:table необходимо для span элемента 

<span style="margin:auto; display:table; border:1px solid red;">
    This is some text in a div element!
</span>
30 голосов
/ 06 декабря 2011

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

Можете ли выопубликовать пример своего макета?Используйте www.jsfiddle.net

8 голосов
/ 04 февраля 2016 
span.login-text {
    font-size: 22px;
    display:table;
    margin-left: auto;
    margin-right: auto;
}

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

Для меня это сработало очень хорошо. попробуйте это также

0 голосов
/ 06 апреля 2017

Помимо всех других объяснений, я полагаю, что вы используете знак равенства "=" вместо двоеточия ":": 

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

Это должно быть: 

<span style="border:1px solid red;text-align:center">
0 голосов
/ 14 июля 2015

Просто используйте word-wrap:break-word; в css. Это работает.

0 голосов
/ 13 мая 2015

Span - это встроенный блок, который подстраивается под размер встроенного текста, с упорством, которое блокирует большинство усилий по стилю из встроенного контекста.Чтобы упростить стиль макета (ограничение конфликтов), добавьте div в тег 'p' с разрывом строки. 

<p> some default stuff
<br>
<div style="text-align: center;"> your entered stuff </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...