Не работает text align center: html5 — Не работает выравнивание по центру text-align: center

не работает justify (CSS) — Stack Overflow на русском

Почему не работает text-align:justify;?

Например:

<div align="justify">

  Кухни спальни прихожие детские шкафы шкафы-купе гостиные винные комнаты
  <br>рабочие кабинеты библиотеки гардеробные комоды тумбы полки
</div>

По идее, за выравнивание последней строки отвечает text-align-last, но его поддержка браузерами оставляет желать лучшего. Поэтому пока стоит воспользоваться хаком с inline-block’ом из соседнего ответа (правда, его кроссбраузерность я не проверял).

body {
  text-align: justify;
  -moz-text-align-last: justify;
  text-align-last: justify;
}
I just want this to justify..

Задача решается путем добавления псевдоэлемента after

#justify {
    text-align: justify;
    }
#justify:after {
  content: "";
  display: inline-block;
  width: 100%;
}
<div>
I just want this to justify.
. </div>

1

Боюсь у вас не совсем верное представление об этом свойстве — св-во не растягивает 3 слова на всю ширину строки, оно ВЫРАВНИВАЕТ текст по ширине блока. http://www.w3schools.com/CSSref/playit.asp?filename=playcss_text-align&preval=justify

PS ну с ссылкой ниже вы же не будете спорить? http://www.w3schools.com/CSSref/pr_text_text-align.asp

1

Зачем использовать align="justify".

Все работает:

http://jsfiddle.net/mrpt15dx/

html
    <div>
        Кухни    спальни    прихожие    детские    шкафы    шкафы-купе гостиные    винные комнаты
        рабочие кабинеты    библиотеки     гардеробные      комоды     тумбы      полки
            рабочие кабинеты    библиотеки     гардеробные      комоды     тумбы      полки
            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div>

css
.border-red{
    position:relative; left:0px; top:0px; 
    border:solid 1px #FF0000; 
    width:100%; 
    text-align:justify; 
    font: normal 14px 'Arial'; 
    color:#000000; 
    padding:25px; 
    box-sizing: border-box;    
}

1

<div align="justify">

  Кухни спальни прихожие детские шкафы шкафы-купе гостиные винные комнаты рабочие кабинеты библиотеки гардеробные комоды тумбы полки
</div>

Воспользовался
word-spacing:[XX]px;
ХХ — значение на усмотрение, в зависимости от ширины блока.
пример: http://jsfiddle.net/mrpt15dx/7/

2

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Выравнивание содержимого блока по горизонтали (свойство text-align)

text-align

Свойство text-align наследуется, применяется к блочным элементам, изменяет текст и строчные элементы

start при direction: ltr; содержимое выравнено по левому краю, при direction: rtl; — по правому
end при direction: ltr; содержимое выравнено по правому краю, при direction: rtl; — по левому
left содержимое выравнено по левому краю
right содержимое выравнено по правому краю
center содержимое выравнено по середине
justify содержимое последней строки выравнено как при значении start, если иное не указано в свойстве text-align-last, остальные строчки выравнены по ширине
justify-all
содержимое выравнено по ширине
match-parent если родителю заданы свойства direction: ltr; и text-align: start;, то содержимое выравнено по левому краю, если direction: rtl; и text-align: start;, то — по правому; если родителю заданы свойства direction: ltr; и text-align: end;, то содержимое выравнено по правому краю, если direction: rtl; и text-align: end;, то — по левому
initial start
inherit наследует значение родителя
unset наследует значение родителя
<style>
div {
  text-align: start;
}
</style>
<div>Свойство <code>text-aligng</code> наследуется, применяется к блочным элементам, изменяет текст и строчные элементы</div>

Что такое

text-align CSS

Свойство text-align, применённое к блоку, выравнивает по горизонтали текст и строчные дочерние элементы.

span
текст

<style>
.raz {
  border: 1px solid green;
  text-align: center;
  background: yellowgreen;
}
.raz div {
  width: 50%;
  min-height: 2em;
  display: inline-block;
}
.raz div,
.raz span {
  border: 1px solid orange;
  background: #fff5d7;
}
</style>
<div>
  <div></div><br>
  <span>span</span><br>
  текст
</div>

Свойство

text-align не работает, так как

Не передвигает блочные элементы

<style>
.raz {
  border: 1px solid green;
  text-align: center;
  background: yellowgreen;
}
.raz div {
  width: 50%;
  min-height: 2em;
  border: 1px solid orange;
  background: #fff5d7;
}
</style>
<div>
  <div></div>
</div>

Не перемещает сам элемент

<style>
.raz {
  border: 1px solid green;
  background: yellowgreen;
}
.raz div {
  display: inline-block;
  width: 50%;
  min-height: 2em;
  border: 1px solid orange;
  text-align: center;
  background: #fff5d7;
}
</style>
<div><div></div></div>

Не реагирует, если задано строчному элементу

текст

<style>
. span {
  width: 9999px; 
  border: 1px solid green;
  text-align: center;
  background: yellowgreen;
}
</style>
<span>текст</span>

Статьи по теме:

  1. Как выравнять блок по середине по горизонтали
  2. Как выровнять блок по середине по вертикали
  3. Как выровнять блок по правой стороне родителя

Как работает

text-align: justify;

свойство text-align имеет значение

justify

Жили-были лиса да заяц. У лисы была избушка ледяная, у а зайчика лубяная. Пришла весна — у лисицы избушка-то и растаяла, а у зайчика стоит по-старому. Лиса попросилась к зайчику погреться да его из избушки-то и выгнала. Идёт зайчик и плачет, а навстречу ему собаки.

— О чём, зайчик, плачешь?

<style>
p {
  text-align: justify;
}
</style>
<p>Жили-были лиса да заяц. У лисы была избушка ледяная, у а зайчика лубяная. Пришла весна — у лисицы избушка-то и растаяла, а у зайчика стоит по-старому.  Лиса попросилась к зайчику погреться да его из избушки-то и выгнала. Идёт зайчик и плачет, а навстречу ему собаки.
<p>— О чём, зайчик, плачешь?

Свойство text-align в значении justify растягивает содержимое так, чтобы и правый, и левый край текста были ровными. Без полей первый и последний символ строки соприкасается с границей элемента. Исключения:

  1. красная строка (первая строка абзаца) может быть отодвинута на расстояние, указанное

CSS text-align: center; не центрирует объекты

спросил

Изменено 2 года назад

Просмотрено 251 тысяч раз

У меня есть следующий html:

 
<ул>
  • Карта сайта
  • Политика конфиденциальности
  • Условия и условия Условия
  • Свяжитесь с нами
  • Со следующим CSS:

     div#footer {
        размер шрифта: 10 пикселей;
        поле: 0 авто;
        выравнивание текста: по центру;
        ширина: 700 пикселей;
    }
     

    Я добавил бит размера шрифта, просто чтобы посмотреть, работает ли стиль (Firebug сообщает, что он работает, но я хотел посмотреть).

    Это работает. Но текст не центрируется в нижнем колонтитуле ни в Firefox, ни в Safari (в IE еще не проверял).

    Пробовал с запасом и без: 0 auto; с и без text-align: center; никакая комбинация этих вещей не работала.

    Вот вывод Firebug:

     div#footer {
        размер шрифта: 10 пикселей;
        поле: 0 авто;
        выравнивание текста: по центру;
        ширина: 700 пикселей;
    }
    Унаследовано от div#page
    #skip-to-nav, #page {
        высота строки: 1.5em;
    }
    Унаследовано от body.html
    тело {
        цвет: #666666;
        семейство шрифтов: verdana, arial, без засечек;
    }
     

    Помощь?

    • css
    • выравнивание по тексту

    3

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

    li элементов display: блок по умолчанию, занимающий все пространство по горизонтали.

    Добавить

     div#footer ul li { display: inline }
     

    как только вы это сделаете, вы, вероятно, захотите избавиться от маркеров списка:

     div#footer ul { list-style-type: none; отступ: 0px; поле: 0px }
     

    1

    Чтобы встроенный блочный элемент выровнялся по центру по горизонтали в родительском элементе, добавьте text-align:center к его родителю.

    2

    Если вы хотите, чтобы текст в элементах списка располагался по центру, попробуйте:

     ul#menu-utility-navigation {
      ширина: 100%;
    }
    ul#меню-утилита-навигация li {
      выравнивание текста: по центру;
    }
     

    Использование дисплей: блок; поле: авто; он будет центрировать div

    1

    Вы можете использовать flex-grow: 1 . Значение по умолчанию — 0 , и это приведет к тому, что text-align: center будет выглядеть как left .

    flex-grow

    0

    Это сработало для меня:

     e.Row.Cells["cell no"].HorizontalAlign = HorizontalAlign.Center;
     

    Но 'css text-align = center' мне не помогло

    надеюсь вам поможет

    Я не знаю, используете ли вы какую-либо версию Bootstrap, но полезный вспомогательный класс для центрирования и блокировки элемента в центре — это . center-block , потому что этот класс содержит полей и отображает свойств CSS, но . класс text-center содержит только свойство text-align

    Bootstrap Helper Class center-block

    1

    Зарегистрируйтесь или войдите в систему

    Зарегистрируйтесь с помощью Google

    Зарегистрироваться через Facebook

    Зарегистрируйтесь, используя электронную почту и пароль

    Опубликовать как гость

    Электронная почта

    Обязательно, но не отображается

    Опубликовать как гость

    Электронная почта

    Требуется, но не отображается

    CSS text-align не работает –

    спросил

    Изменено 9 лет, 6 месяцев назад

    Просмотрено 131 тысяч раз

    У меня есть этот код css здесь

     . navigation{
        ширина:100%;
        цвет фона:#7a7a7a;
        размер шрифта: 18px;
    }
    .navigation ул {
        тип стиля списка: нет;
        маржа: 0;
    }
    .навигация ли {
        плыть налево;
    }
    .navigation ул а {
        цвет: #ffffff;
        дисплей: блок;
        отступ: 0 65px 0 0;
        текстовое оформление: нет;
    }
     

    То, что я пытаюсь сделать, это центрировать навигацию по классу. Я попытался использовать text-align:center; и вертикальное выравнивание: посередине; , но ни один из них не работал.

    и вот код HTML

     
     

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

    • css
    • выравнивание текста
    • выравнивание текста

    1

    Измените правило для элемента с:

     .navigation ul a {
        цвет: #000;
        дисплей: блок;
        отступ: 0 65px 0 0;
        текстовое оформление: нет;
    }​
     

     .navigation ul a {
        цвет: #000;
        дисплей: блок;
        отступ: 0 65px 0 0;
        текстовое оформление: нет;
        ширина:100%;
        выравнивание текста: по центру;
    }​
     

    Просто добавьте два новых правила ( width:100%; и text-align:center; ). Вам нужно расширить привязку, чтобы она занимала всю ширину элемента списка, а затем выровнять текст по центру.

    Пример jsFiddle

    2

    Вы должны заставить UL внутри div вести себя как блок. Попробуйте добавить

     .navigation ul {
         отображение: встроенный блок;
    }
     

    Я стараюсь избегать плавающих элементов, если это действительно не нужно дизайну.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *