Не работает text align center: Почему не работает text-align? — Хабр Q&A – Почему никак не могу text-align:center этого heading’a? — Хабр Q&A

text-align:center не работает с элементами div

Я искал около 45 минут и не мог найти решение для своей проблемы здесь. Я хочу, чтобы мои дивы класса gallery (они будут создаваться динамически) выровняли себя в центре div gallery_container, используя только правила css. Я учусь, так что любое объяснение было бы полезно!

Заранее спасибо!

<head>
    <style>
    #gallery_container{
        text-align: center; 
        width:100%;
        overflow: auto; 
        background:orange;  
    }
    .gallery{
        text-align: left;   
        border-style: solid;
        border-width:3px;
        border-top-left-radius: 40px;
        border-bottom-right-radius: 40px; 
        background:yellow;
        width:335px;
        padding:20px;
        float:left;
        margin:15px;
    }
    .gallery h3{
        margin-top:0;
    }
    .gallery img{
        height:120px;
        width:160px;
        float:right;
    }
</style>

<body>
    <div id ='content_gallery'>
        <h3>Gallery</h3>

        <div>
            <div class = gallery>
                <img src = 'bowling_01.png'>
                <h3>Company bowling</h3>
                <h5>Date: June 14, 2013</h5>
                <p>The company heads to Boca Bowl for our monthly bowling event!</p>
            </div>

            <div class = gallery>
                <img src = 'bowling_01.png'>
                <h3>Company bowling</h3>
                <h5>Date: June 14, 2013</h5>
                <p>The company heads to Boca Bowl for our monthly bowling event!</p>
            </div>

            <div class = gallery>
                <img src = 'bowling_01.png'>
                <h3>Company bowling</h3>
                <h5>Date: June 14, 2013</h5>
                <p>The company heads to Boca Bowl for our monthly bowling event!</p>
            </div>
        </div>
    </div>
</body>

а тут fiddle http://jsfiddle.net/9gwKc/1/

html layout center text-align

Поделиться Источник Doctor Parameter     18 июня 2013 в 20:08

1 Ответ



13

Это можно сделать с помощью дисплея inline-block , float:left всегда будет посылать элементы в самое дальнее левое место.

.gallery {
   text-align: left;   
   border-style: solid;
   border-width:3px;
   border-top-left-radius: 40px;
   border-bottom-right-radius: 40px; 
   background:yellow;
   width:335px;
   padding:20px;
   /*float:left; remove this*/
   margin:15px;

   /*add this*/ 
   display:inline-block;
   position:relative;
}

Поделиться Doctor Parameter     19 июня 2013 в 13:33



text-align:center не работает

У меня есть сайт http://11klassniki.ru , и я пытаюсь поместить текст в середине с помощью text-align:center, но это не работает. #konkurs_ege { position:absolute; top:10px; left:380px; width:140px;...


text-align:center не работает, когда position:absolute с javascript?

Я делаю раздел комментариев прокрутки, он работает, когда несколько элементов, повторяемых php, имеют свое верхнее свойство, анимированное с javascript. Все, кажется, работает нормально, за...


<input> с display:block внутри text-align:center div

С этим: <div id=parentdiv style=text-align:center;width:600px;margin:auto;> <input type=button value=push me /> </div> Кнопка выравнивается по центру окна браузера (по желанию) в...


Text-align:center не работает на изображении внутри div

У меня есть div в моем приложении, содержащем информацию о профиле, такую как имя, учетная запись # и изображение профиля. По какой-то причине изображение профиля не будет центрироваться, хотя я...


Центрирование внешнего div, 'text-align:center' не работает должным образом

У меня есть раздел контента в div, и в настоящее время он находится по центру слева. Fiddle. Я попробовал добавить контейнер div как: <div style='text-align:center;...


Почему vertical-align:middle не работает как text-align:center

Может кто-нибудь объяснить мне, почему vertical-align:middle не работает как text-align:center ? Я имею в виду, почему так трудно заставить его работать? Я хочу знать, почему эти W3 ppl не делают...


Почему <div> не центрируется даже с "text-align:center"?

взгляните на этот код. Я новичок в кодировании, поэтому я мог бы сделать, возможно, некоторые ошибки, поэтому я прошу помощи здесь. Я не понимаю, как разместить div #input-group в середине...


text-align:center не имеет никакого эффекта

Я использую некоторые CSS с классами для стилизации различных типов текста. Я создаю некоторые ссылки с классом под названием a.searchresult . Один из атрибутов- text-align:center , но он не влияет...


Ставлю <h3> с моим текстом _27, имея его в стиле "text-align:center;" не работает

Это для выпадающего меню из 4 столбцов. В первом столбце С является HOME в div, у меня есть текст HOME в A метка. экс. <p style=text-align:center;> HOME </p> теперь, если я попробую...


Почему "text-align:center" работает для "div", но не для "img"?

Вот вам пример: p, span, div,img { text-align: center; } <p>Para</p> <span>Span</span> <div>Div</div> <img src=https://www.google.com/images/nav_logo195.png...


Text-align:center не работает на изображении внутри div

У меня есть div в моем приложении, содержащем информацию о профиле, такую как имя, учетная запись # и изображение профиля. По какой-то причине изображение профиля не будет центрироваться, хотя я пробовал трюк text-align:center. Вот мой HTML:

<div>
    <img alt="6dbepurq" src="http://anymarket.s3.amazonaws.com/users/avatars/000/000/015/medium/6dBEpuRQ.jpeg?1406690559">
    <h3>Tom Maxwell</h3>
    <p>University of California, Berkeley</p>
    <p>User #15</p>
</div>

И CSS для #profile-heading div выглядит так:

 #profile-heading {
  text-align:center;
  margin-top:50px;
  img{
    border-radius:50%;
    width:150px;
    height:150px;
  }
  h3{
    font-weight:800;
    margin-bottom:5px;
  }
}

Есть идеи?

html css

Поделиться Источник Tom Maxwell     22 августа 2014 в 02:51

4 Ответов



1

Тег img по умолчанию является встроенным блоком, и вы должны использовать text-align: center в Родительском контейнере, чтобы выровнять тег

img по горизонтали.
В случае, если значение свойства display было изменено на block , вы должны установить стили margin-left: auto; margin-right: auto; в центр по горизонтали.

Поделиться Rakhat Rakhmetov     22 августа 2014 в 04:04



0

Когда я не вложил ваши стили, все работало в центрировании изображения:

#profile-heading {
    text-align:center;
    margin-top:50px;
}
#profile-heading img {
    border-radius:50%;
    width:150px;
    height:150px;
}
#profile-heading h3 {
    font-weight:800;
    margin-bottom:5px;
}

Вложенные только для CSS препроцессоров, использующих SASS или LESS.

Еще один способ центрировать вещи - с автоматическими левыми и правыми полями: margin: 0 auto; надеюсь, это поможет!

Поделиться user1791914     22 августа 2014 в 02:57



0

Установка свойства отображения для img сделает трюк:

#profile-heading {
  text-align:center;
  margin-top:50px;
  img{
    border-radius:50%;
    width:150px;
    height:150px;
    display: inline-block; /* added this line */
  }
  h3{
    font-weight:800;
    margin-bottom:5px;
  }
}

Поделиться Bhojendra Rauniyar     22 августа 2014 в 03:10



0

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

  1. Либо применить text-align: center к родительскому элементу.
  2. сделайте тег <img> элементом уровня блока, используя display: inline-block; .

Вы можете увидеть DEMO здесь.

Поделиться Kheema Pandey     22 августа 2014 в 03:55



text-align:center не работает

У меня есть сайт http://11klassniki.ru , и я пытаюсь поместить текст в середине с помощью text-align:center, но это не работает. #konkurs_ege { position:absolute; top:10px; left:380px; width:140px;...


<input> с display:block внутри text-align:center div

С этим: <div id=parentdiv style=text-align:center;width:600px;margin:auto;> <input type=button value=push me /> </div> Кнопка выравнивается по центру окна браузера (по желанию) в...


text-align:center не работает, когда position:absolute с javascript?

Я делаю раздел комментариев прокрутки, он работает, когда несколько элементов, повторяемых php, имеют свое верхнее свойство, анимированное с javascript. Все, кажется, работает нормально, за...


Центрирование внешнего div, 'text-align:center' не работает должным образом

У меня есть раздел контента в div, и в настоящее время он находится по центру слева. Fiddle. Я попробовал добавить контейнер div как: <div style='text-align:center;...


Почему vertical-align:middle не работает как text-align:center

Может кто-нибудь объяснить мне, почему vertical-align:middle не работает как text-align:center ? Я имею в виду, почему так трудно заставить его работать? Я хочу знать, почему эти W3 ppl не делают...


text-align:center не работает должным образом на абсолютных позиционированных пролетах

Мне нужно поместить 2 <span> внутри a <div> , первый пролет должен быть помещен сверху, второй-снизу, как Север-Юг. <div> <span class=north>N</span> <span...


граница-радиус на div и непрозрачность на изображении внутри не работает прямо в Chrome

Я использую div, у которого есть радиус границы, внутри div есть изображение, которое имеет непрозрачность и на Firefox, которое отлично работает, но в Chrome border-radius не работает. Смотрите...


Почему <div> не центрируется даже с "text-align:center"?

взгляните на этот код. Я новичок в кодировании, поэтому я мог бы сделать, возможно, некоторые ошибки, поэтому я прошу помощи здесь. Я не понимаю, как разместить div #input-group в середине...


text-align:center не имеет никакого эффекта

Я использую некоторые CSS с классами для стилизации различных типов текста. Я создаю некоторые ссылки с классом под названием a.searchresult . Один из атрибутов- text-align:center , но он не влияет...


Почему "text-align:center" работает для "div", но не для "img"?

Вот вам пример: p, span, div,img { text-align: center; } <p>Para</p> <span>Span</span> <div>Div</div> <img src=https://www.google.com/images/nav_logo195.png...


text-align:center; не работает - CodeRoad

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

Вот оба моих файла CSS:

Вы можете увидеть новый вариант в ссылке JSfiddle ниже.

jsFiddle: http://jsfiddle.net/2WvrV/

Я также предоставляю код для старого сайта (который правильно выравнивает текст) :

http://jsfiddle.net/fiddlerOnDaRoof/fQpjX/

старый HTML очень похож на новую версию я только что добавил style= "float:left;" в одном из дивов

html css

Поделиться Источник Xitcod13     02 мая 2012 в 05:16

4 Ответов



7

Короткий ответ: ваш текст не центрирован, потому что элементы плавают, а плавающие элементы "shrink" к содержимому, даже если это элемент уровня блока.

Не могли бы вы подробнее объяснить, что это значит?

Я должен был установить все свое положение относительно, чтобы изменить Родительский div размер, когда я добавляю к нему компоненты с javascript

Поделиться Graham Conzett     02 мая 2012 в 05:26



5

Везде, где у вас есть float:left; в вашем CSS, добавьте width: 100%; после него. Плавающий убьет ваше желаемое выравнивание центра.

Кроме того, добавьте text-align: center; к #login

Поделиться izolate     02 мая 2012 в 06:28



1

Наконец-то я все понял. Все что мне нужно было сделать это добавить clear:left; к моему loginBttn div после этого все работало нормально

спасибо за попытку помочь всем

Поделиться Xitcod13     02 мая 2012 в 20:59



-1

попробовать это. я думаю это может помочь тебе

text-align:justify;

Поделиться NarayaN     02 мая 2012 в 05:20



text-align:center не работает

У меня есть сайт http://11klassniki.ru , и я пытаюсь поместить текст в середине с помощью text-align:center, но это не работает. #konkurs_ege { position:absolute; top:10px; left:380px; width:140px;...


Почему vertical-align:middle не работает как text-align:center

Может кто-нибудь объяснить мне, почему vertical-align:middle не работает как text-align:center ? Я имею в виду, почему так трудно заставить его работать? Я хочу знать, почему эти W3 ppl не делают...


text-align:center не работает, когда position:absolute с javascript?

Я делаю раздел комментариев прокрутки, он работает, когда несколько элементов, повторяемых php, имеют свое верхнее свойство, анимированное с javascript. Все, кажется, работает нормально, за...


Text-align:center не работает на изображении внутри div

У меня есть div в моем приложении, содержащем информацию о профиле, такую как имя, учетная запись # и изображение профиля. По какой-то причине изображение профиля не будет центрироваться, хотя я...


Bootstrap carousel-индикаторы " text-align:center " не работают

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


text-align:center не имеет никакого эффекта

Я использую некоторые CSS с классами для стилизации различных типов текста. Я создаю некоторые ссылки с классом под названием a.searchresult . Один из атрибутов- text-align:center , но он не влияет...


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

Я создал новую панель прокрутки, я хочу поместить содержимое в центр панели, Я определил css: .myfont { font-size: 18pt; padding-bottom: 0px; text-align: center; } но text-align: center не работает,...


text-align:center не центрирование текста

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


Центрирование внешнего div, 'text-align:center' не работает должным образом

У меня есть раздел контента в div, и в настоящее время он находится по центру слева. Fiddle. Я попробовал добавить контейнер div как: <div style='text-align:center;...


Не могу text-align:center на css

Кажется, я не могу достать свои кнопки Home до центра. Начальный текст находится слева, а не в центре. У меня есть мой htm и css связаны вот так: html: <html> <head> <link...


CSS text-align:center игнорируется

У меня есть следующий сайт, который использует лист CSS, который я унаследовал от последнего разработчика. http://bit.ly/1m0LZjZ Кажется, все в порядке, кроме меню. Первоначально в #nav (строка 381...


центр выравнивания текста не работает внутри таблицы inline-block html

Я делаю HTML Email и решил использовать таблицы для каждого из элементов nav. Мне нужно, чтобы таблицы отображались встраиваемыми. Я использовал display:inline-block; на таблице, создавая желаемый результат, Однако TEXT внутри таблицы не будет выравниваться. Я поместил текст-align: center; в таблицу, td и тег, но это не сработало.

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

HTML

<table border="0" cellspacing="0" cellpadding="0">
<tr>
    <td align="right" valign="top">

        <table border="0" cellspacing="0" cellpadding="0" bgcolor="#999966">
            <tr>
                <td align="center"> <a href="#">
     option 1
     </a>

                </td>
            </tr>
        </table>

        <table border="0" cellspacing="0" cellpadding="0" bgcolor="#999966">
            <tr>
                <td align="center"> <a href="#">
     option 2
                    </a>

                </td>
            </tr>
        </table>

        <table border="0" cellspacing="0" cellpadding="0" bgcolor="#999966">
            <tr>
                <td align="center"> <a href="#">
     option 3
     </a>

                </td>
            </tr>
        </table>
    </td>
</tr>

CSS

.navInline {
display:inline-block;
vertical-align:top;
text-align: center !important; }

вот этот неработающий код

http://jsfiddle.net/nathanaric/pf35h/9/

html html-email css

Поделиться Источник nathanaric     09 апреля 2014 в 17:51

3 Ответа



4

Вам нужно установить атрибут width в ячейках таблицы.

Пример:

<table border="0" cellspacing="0" cellpadding="0" bgcolor="#999966">
  <tr>
    <td align="center"><a href="#">option 1</a></td>
  </tr>

Поделиться John Rooney     09 апреля 2014 в 17:54



3

Не могу сказать, что я согласен с выбранным ответом о добавлении ширины. Ваша проблема - это атрибут встроенного блока. Это влияет на все значения по умолчанию агента пользователя дочерних элементов таблицы. Просто замените display:inline-block на float:left, и вы получите те же самые результаты, когда все остальные css stlying встанут на свои места. (выравнивание текста, например)

.navInline {
float:left;
vertical-align:top;
text-align: center !important;
}

Вот fiddle применение нового стиля.

http://jsfiddle.net/bdTUz/

НО ГЛАВНОЕ... .. Ваш вопрос гласит, что вы создаете шаблон email. Занятия могут не работать. Что я знаю из создания электронных писем на основе html, лучше всего добавлять встроенные стили.

Эта ссылка может быть очень полезной http://htmlemailboilerplate.com/

Поделиться Itumac     10 апреля 2014 в 14:40



0

Я смог решить вашу проблему, используя список, а не используя какой-либо DIVs. Там гораздо чище. Рабочий код можно найти в этом JSFiddle :

HTML

  <ul>
  <li>option1</li>
  <li>option2</li>
  <li>option3</li>
  </ul>

CSS

    .navInline li {
    display:inline-block;
    list-style:none;
    border: 1px solid #333;
    padding: 5px;
    background-color: yellow;   
}

Поделиться DivineChef     09 апреля 2014 в 18:23



Почему свойство выравнивания текста не работает внутри элемента button?

button { text-align: center; font-size:50px; color:black; border:2px solid white; border-style:dotted; border-color:red; } Когда я запускаю этот код, все свойства работают, кроме выравнивания...


margin-top не работает должным образом внутри формы inline-block

У меня есть форма, которая имеет тип входного текста внутри, я помещаю ее прямо перед выбранным объектом со следующим кодом, но она не совсем выровнена с выбранным объектом. Когда я пытаюсь ввести...


Элементы уровня блока внутри дисплея: inline-block

Я пытаюсь поместить некоторые (вертикально уложенные) элементы display:block в элемент display:inline-block. Согласно спецификации CSS, элемент inline-block должен быть содержащим блоком, поэтому он...


Центр inline-block div в родителе при игнорировании плавающих элементов

Я пытаюсь центрировать встроенный div в его родителе. Родительский элемент также имеет дочерний div , который плавает справа. Из - за правого выравнивания div мой центрированный div смещен влево. Я...


Центр выравнивания текста в отчете SSRS

В моем отчете SSRS я получаю тексты для заполнения таблицы из набора данных (запрос SQL). Существует определенная строка текста из запроса, которую я хотел бы отобразить в центре (т. е. оправдать...


Каковы рекомендации по использованию " display: inline-block"

Inline-block и position путают меня, когда я использую их с элементами списка. Dreamweaver CS3 не помогает, так как он не показывает блоки inline, но как стек элементов. Я заинтересован в изучении...


Выравнивание divs в строке со свойством "display: inline-block" не выравнивается должным образом

Я пытаюсь выстроить divs в ряд с display: inline-block . Он прекрасно работает, пока я не вставлю <input /> в div. Пожалуйста, взгляните на кодовую панель Вот код для html: <div...


Display: block и display:inline эквивалентны display: inline-block?

У меня есть div, который я просматриваю в Firebug: Один раздел имеет: display: block; В другом месте, есть: display: inline !important; Я бы подумал, что inline переопределит block , но ни один...


'display: inline block' трюк не работает в firefox

то, что я пытаюсь создать, - это полностраничный веб-сайт (без полосы прокрутки) с блоком text/images/divs, который центрируется как по вертикали, так и по горизонтали. Я исследовал и использовал...


отображается 'block' дивов внутри нескольких 'inline' дивов

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


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

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