Question

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

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

Answer 2

您应该在text-align:center;

上设置li{}

并删除position:relative;

上的.container .nav-block .header {

<强> DEMO

编辑我的sugestions你有一个较短的CSS，因为你可以删除unaccecary事情。喜欢这里。

.container .nav-block .header {
  color: #FFFFFF;
  font-size: 2em;
  font-weight: bold;
  padding: 5px;
}

DEMO 2 （与其他相同但css较少）

Answer 3

只需将text-align:center;添加到.nav-tabs或.nav-block

即可

Answer 4

请尝试以下css。

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


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

Answer 5

您尚未关闭<ul>代码。

我希望这就是你想要的 - ＆gt;

DEMO

<强> HTML

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

        <!--closing the ul tag-->

        </ul> 
      </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;
  text-align:center; /*aligning the text center*/
  line-height:60px; /*this gives vertical alignment to your element*/
}

.container .nav-block .header {
  color: #FFFFFF;
  font-size: 2em;
  font-weight: bold;
  left: 0; /*removed the defined 20% to center you text inside anchor <a> tags*/
  padding: 5px;
  position: relative;
  text-align: center;
  top: 21%;
}

将文本放在li标签的中心

5 个答案: