Невозможно центрировать элемент по отношению к вертикальному выравниванию и отображению: table-cell

Question

Невозможно центрировать элемент по отношению к вертикальному выравниванию и отображению: table-cell

0

Во-первых, см. Снимок экрана: http://i.stack.imgur.com/5iARf.png

Я использую этот код:

<div class="c-news-menu sub">
  <div class="articles-submenu-title active">Оформление ОСАГО</div>
  <div class="articles-submenu-title">Калькулятор ОСАГО</div>
  <div class="articles-submenu-title">Страховые компании</div>
</div>

.c-news-menu.sub
{
    display:table !important;   /* only 3 line in all code has !important */
}
.c-news-menu .articles-submenu-title {
    width: 166px;
    height: 37px;
    padding: 5px 10px 10px;
    font-size: 16px;
    font-weight: bold;
    display: table-cell !important;     /* It doesn't work,
    vertical-align: middle !important;   * but must work correctly */
    /* margin: auto 0; NO, becose auto is 0 for top and bottom */
    /* line-height: 30px; NO, becose have no single line */
    /* padding-top: 30px; NO, becose line may be 1 or 2, so height of parent changed, need fix */
    /* text-align: center; NO, becose only horisontal align, need vertical */
}

Что я делаю неправильно или не понимаю?

x-positive 13 апр. 2014, в 21:18

Источник

0

Где height клетки?
Mr. Alien 13 апр. 2014, в 18:35
0

.articles-submenu-title {height: 37px; }
x-positive 13 апр. 2014, в 18:48

Теги:

html

css

css-tables

vertical-alignment

1 ответ

Ещё вопросы

fiction · Accepted Answer · 2014-04-13T17-15-00.000Z

0

Лучший ответ

Здесь обходной путь

HTML:

<div class="c-news-menu sub">
    <div id="c-news-group-buy-osago" class="articles-submenu-title active"><p>Оформление ОСАГО</p></div>
    <div id="c-news-group-calc-osago" class="articles-submenu-title"><p>Калькулятор ОСАГО</p></div>
    <div id="c-news-group-company-osago" class="articles-submenu-title"><p>Страховые компании</p></div>
</div>

CSS:

.articles-submenu-title
{
    display:table; /* you maybe need !important here if you have another display rule somewhere else for this class */
}

.articles-submenu-title p
{
    display:table-cell;
    vertical-align:middle;
}

Я завернул текст внутри статьи-подменю-заголовка в <p>

JSFIDDLE

fiction 13 апр. 2014, в 17:15

0

исправлено, но это не работает
x-positive 13 апр. 2014, в 18:48
0

@ x-positive сделал это для .c-news-menu , я отредактировал мою ошибку.
fiction 13 апр. 2014, в 18:51
0

да, и я пробую разные элементы через инспектор, разные значения, но безрезультатно
x-positive 13 апр. 2014, в 18:58
0

я добавляю этот код на мой сайт и на мой вопрос тоже
x-positive 13 апр. 2014, в 19:03
0

@ x-positive Попробуйте еще раз, мое окончательное редактирование
fiction 13 апр. 2014, в 19:10
0

Я просто стараюсь! важно, потому что мои правила не работают постоянно. С <p> внутри у текста есть некоторое пространство сверху, но когда я редактирую правило CSS, текст снова был сверху. Могу ли я отправить ссылку на страницу сайта, чтобы вы могли увидеть весь код с помощью специальных инструментов?
x-positive 13 апр. 2014, в 19:27
0

@ х-позитив обязательно отправить ссылку
fiction 13 апр. 2014, в 19:31
0

kasko-kupit-v-spb.ru , главная страница
x-positive 13 апр. 2014, в 19:36
0

@ x-positive проблема в том, что вертикальное выравнивание не работает с float, поэтому вы должны использовать line-height. это может не быть хорошей идеей, но это работает: #c-news-group-buy-osago, #c-news-group-calc-osago, #c-news-group-osago-etc { line-height:2.5em; }
fiction 13 апр. 2014, в 19:57
0

@ х-позитив также у вас есть орфографические ошибки в c-news-atricles
fiction 13 апр. 2014, в 19:58
0

Благодарю. Это костыль, но, возможно, это лучшее решение в этой ситуации. Я буду рассматривать их отношения с «поплавком» в будущем.
x-positive 13 апр. 2014, в 20:07
0

где и что опечатка
x-positive 13 апр. 2014, в 20:22
0

@ x-Positive в поиске HTML для "c-news-atricles"
fiction 13 апр. 2014, в 20:26
0

О, спасибо, я этого не видел, даже когда смотрел в упор)
x-positive 13 апр. 2014, в 20:32

Показать ещё 12 комментариев