如何使用W3补充工具栏和w3-bar-item w3按钮在按钮下显示文本？

Question

到目前为止，我有这个：

<div class="w3-sidebar w3-bar-block w3-indigo w3-xxlarge" style="width:70px">
  <a href="#" class="w3-bar-item w3-button"><i class="fa fa-user-circle"></i></a>
  <a href="#" class="w3-bar-item w3-button"><i class="fa fa-id-card-o"></i></a>
  <a href="#" class="w3-bar-item w3-button"><i class="fa fa-folder-open"></i></a>   
</div>

如果我在a标签中输入文字，文字最终会看起来混乱，并且不会按照我想要的方式进入按钮。我该如何解决这个问题？

Answer 1

我制作的codepen应与您尝试的相符：

这是css：

.w3-sidebar {
  width: auto;
}

.w3-bar-block .w3-bar-item {
  /* Overrides default rule */
  text-align: center;
}

.sidebar-icon-label {
  display: block;
  font-size: 10px;
}

您会看到我删除了w3-sidebar的内联样式，并将其设置为“auto”，这意味着它将具有其内容的大小。

我为您的图标标签创建了一个新类，并覆盖了原生w3规则以使所有内容居中。

Answer 2

更新你的代码就像这样

<style>
    i{ width:20px;
    height:20px;
    display:inline-block; }
    a{ float:left; width:100%; text-align:center; }
    span{ float:left; width:100%; text-align:center; }
</style>

    <div class="w3-sidebar w3-bar-block w3-indigo w3-xxlarge" 
    style="width:70px">
                    <a href="#" class="w3-bar-item w3-button"><i class="fa fa-user-circle"></i><span>Text 1</span></a>
                    <a href="#" class="w3-bar-item w3-button"><i class="fa fa-id-card-o"></i><span>Text 1</span></a>
                    <a href="#" class="w3-bar-item w3-button"><i class="fa fa-folder-open"></i><span>Text 1</span></a>    
    </div>