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

使用以下代码段结束：

<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中。这样可以灵活地修复左右边距，并在每个菜单项之间添加一些空间。

对齐语义UI文本菜单中心

1 个答案: