Question

首先，请参见屏幕截图：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 */
}

我做错了什么或不明白？

Answer 1

这是一个解决方法

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>

中的articles-submenu-title中

JSFIDDLE

无法使元素居中与垂直对齐并显示：table-cell

1 个答案: