0

我正在开发一个在列的页脚中有一组图标的应用程序。目前，图标是左对齐的。但是，我想让它们居中。为了演示，我有一个可以在这里找到的小提琴。HTML 如下所示：

<div class="ui full-height grid">
  <div class="full-height row">
    <div id="navDiv" class="four wide full-height column" style="background-color:navy; color:white;">
      <div id="nav-tab-items" class="row">
        <div class="nav-tab-frame column">
          <div class="ui active tab nav-tab-content" data-tab="home">
              First Tab
          </div>
          <div class="ui tab nav-tab-content" data-tab="info">
            Second Tab
          </div>
          <div class="ui tab nav-tab-content" data-tab="third">
            Third Tab
          </div>
        </div>
      </div>

      <div id="nav-tab-control" class="bottom aligned row">
        <div class="ui pointing secondary menu drawer" style="margin-bottom:0rem;">
          <a class="active red item" data-tab="home">tab 1</a>
          <a class="blue item" data-tab="info">tab 2</a>
          <a class="green item" data-tab="third">tab 3</a>
        </div>
      </div>    
    </div>

    <div class="eight wide full-height column">
      [Content Goes Here]
    </div>
  </div>
</div>

有两个问题nav-tab-control。首先，一旦我为nav-tab-control样式设置了'bottom:0'，该行就占据了页面的整个宽度。我无法在小提琴中重现该错误。但我不知道是什么原因造成的。其次，我相信这与第一个问题有关，就是我无法弄清楚如何在navDiv.

我真诚地感谢有人可以提供的任何见解。

4

1 回答 1

0

这段代码将按钮放在底部的中心（我想不出你所说的“图标”还有什么意思）。

你说#nav-tab-control的是要求屏幕的整个宽度。这实际上是使其内容居中所必需的。所以因为它没有自动完成，所以我100%在css中设置了宽度：

#nav-tab-control { 
    position:absolute; 
    bottom:0;
    left: 0;
    width: 100%;
    text-align: center;
}

.ui.pointing.secondary.menu.drawer { display: inline-block; }

这使得#nav-tab-control 页面的整个宽度，并将其中的任何文本居中。然后，图标的容器显示为inline-block，因此它尊重居中。

http://jsfiddle.net/62eMj/3/

如果不想在整个屏幕居中，也可以设置position: relative为父元素之一。例如将它们居中在蓝色条内（也导致它们换行）：

http://jsfiddle.net/62eMj/4/

我发现很难找出你的实际问题是什么。我以为我知道，但现在我不太确定。我希望这些提示能帮助你解决它。

于 2014-03-01T21:06:16.647 回答