css - 将文本定位在 li 标签的中心

Question

我使用如下所示的 html 代码创建了三个 block 。 “a”标签具有 min-height css 属性，因此它将显示为 block 。我无法将文本放在“li”标记中心的 span 标记内。虽然标签内的每个文本长度不同，但我想将它们显示在中心。

<div class="container">
  <div class="col-md-12">
        <ul id="tabs" class="nav-tabs">
          <li class="col-md-4 nav-list">
            <a href="#" class="nav-block">
              <span class="header">Data</span>
            </a>
          </li>
          <li class="col-md-4 nav-list">
            <a href="#" class="nav-block">
              <span class="header">Charts</span>
            </a>
          </li>
          <li class="col-md-4 nav-list">
            <a href="#" class="nav-block">
              <span class="header">Reports</span>
            </a>
          </li>
      </div>
   </div>

CSS:

.container ul {
    list-style: none outside none;
}

li {
    display: list-item;
}

.col-md-4 {
    width: 33%;
}
.nav-block {
    background-color: #FFA500;
    display: block;
    min-height: 70px;
    position: relative;
}

.container .nav-block .header {
    color: #FFFFFF;
    font-size: 2em;
    font-weight: bold;
    left: 20%;
    padding: 5px;
    position: relative;
    text-align: center;
    top: 21%;
}

请告诉我我哪里出错了

Answer 1

刚刚更改了 css 以将文本居中，检查 fiddle

.nav-block {
  background-color: #FFA500;
  display: block;
  min-height: 70px;
  position: relative;
  text-align: center;
}

.container .nav-block .header {
  color: #FFFFFF;
  font-size: 2em;
  font-weight: bold;
  padding: 5px;
  position: relative;
  text-align: center;
  top: 21%;
}