css - 更改 p :tabMenu 中的 css 样式

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