Question

我正在开发一个在列的页脚中有一组图标的应用。目前，图标是左对齐的。但是，我想让它们居中。为了证明，我有一个可以找到的小提琴here。 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的宽度范围内。

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

Answer 1

此代码将按钮置于底部（我无法想象你的“图标”是什么意思）。

你说#nav-tab-control声称屏幕的整个宽度。实际上，这需要使其内容成为可能。因为它没有自动执行，我在css中将宽度设置为100%：

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

我发现找出你的实际问题有点困难。我以为我知道，但现在我'，不太确定。我希望这些提示可以帮助你解决它。

使用CSS将一组项目居中

1 个答案: