对齐语义 UI 文本菜单中心

Question

我是 Semantic UI 的新手，我试图在我的页面顶部放置一些响应式文本菜单项，这些菜单项始终与页面中心对齐。 Here's the sample of my code.

<div class="ui text menu">
    <a class="blue item" href="#">Home</a>
    <a class="blue item" href="#">About</a>
    <a class="blue item active" href="#">Contact</a>
</div>

我曾尝试使用基于网格的布局和网上建议的许多其他方法，但它们都与在文本菜单上不起作用的紧凑菜单有关。

Answer 1

最终使用以下代码 sn-p:

<div class="ui relaxed grid">
    <div class="five wide column"></div>
    <div class="six wide column">
        <div class="ui grid text menu">
            <div class="five wide column">
                <a class="yellow item" href="#">Home</a>
            </div>
            <div class="five wide column">
                <a class="yellow item" href="#">About</a>
            </div>
            <div class="five wide column">
                <a class="yellow item active" href="#">Contact</a>
            </div>
        </div>
    </div>
    <div class="five wide column"></div>
</div>

jsFiddle link

基本上，我在菜单上创建了一个网格包装器，并将每个菜单项包装在 div 中。这为固定左右边距提供了灵活性，并且如果需要，还可以在每个菜单项之间添加一些空间。