无法将元素居中vs垂直对齐并显示：表格单元

Question

First, see screenshot: http://i.stack.imgur.com/5iARf.png

I'm use this code:

<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 */
}

What am I doing wrong or do not understand?

Answer 1

Here's a workaround

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;
}

I wrapped the text inside the articles-submenu-title in a <p>

JSFIDDLE