Question

在p:tabMenu内我试图修正<li>的大小，并将文字水平和垂直居中。

如果我复制源代码并手动完成，我就成功了：

源代码：

<div class="header">
    <ul class="ui-tabmenu-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all" role="tablist">
     <li class="ui-tabmenuitem ui-state-default ui-state-active ui-corner-top" role="tab" aria-expanded="true"><a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="/audienz/home.xhtml"><span class="ui-menuitem-text">Point A</span></a></li>
     <li class="ui-tabmenuitem ui-state-default ui-corner-top" role="tab" aria-expanded="false"><a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="/audienz/tour.xhtml"><span class="ui-menuitem-text">Point B</span></a></li>
     <li class="ui-tabmenuitem ui-state-default ui-corner-top" role="tab" aria-expanded="false"><a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="/audienz/contact.xhtml"><span class="ui-menuitem-text">Point C</span></a></li>
     <li class="ui-tabmenuitem ui-state-default ui-corner-top" role="tab" aria-expanded="false"><a tabindex="-1" class="ui-menuitem-link ui-corner-all" href="/audienz/impressum.xhtml"><span class="ui-menuitem-text">Point D</span></a></li>
    </ul>
</div>

CSS代码：

.header li {
  border: 1px dotted red;
  float: left;
}

.header a {
  border: 1px dotted blue;
  display: table-cell;
  height: 50px;
  width: 140px;
  text-align: center;
  vertical-align: middle;
}

但是当我将CSS代码放入我的自定义主题时，<li>内的文字只是水平居中，而不是垂直居中。

我相信Primefaces中必须有一些地方可以覆盖我的自定义主题CSS。

如何强制我的CSS代码垂直居中？我使用Wildfly 10，jdk1.8.0_71，JSF 2.2，Primefaces 5.3，javaee-web-api 7.0。

Answer 1

尝试在CSS规则中使用!important，使用!important与您的CSS将允许您覆盖主题CSS

.header li {
  border: 1px dotted red;
  float: left !important;
}

.header a {
  border: 1px dotted blue;
  display: table-cell !important;
  height: 50px !important;
  width: 140px !important;
  text-align: center !important;
  vertical-align: middle !important;
}

在p：tabMenu中更改css样式

1 个答案: