html - Div 对齐问题

Question

我刚刚从 10 年的网页设计中断中回来。我越来越接近了解 div 属性的内在和外在(那些在我那个时代不像现在那么流行)。现在我正在尝试获得这样的布局:

标志 |图标分区 旗帜股 链接分区 内容分区 页 footer 分

我目前的问题是链接 Div 居中，即:

<div class="menu">
    <a class="link1" href="#">Home</a>
    <a class="link2" href="#">About Us</a>
    <a class="link3" href="#">Services</a>
    <a class="link4" href="#">Portfolio</a>
    <a class="link5" href="#">Contant Us</a>
</div>

我正在使用的 CSS:

.menu   
    {
        TO BE USED
    }

.menu a
    {
        display: block;
        float: left;
        line-height: 144px;
        margin: 5px;
        opacity: 0.3;
        text-align: center;
        width: 144px;
    }

.link1
    {
        background: #fdd22a;
    }

.link2
    {
        background: #009fe3;
    }

.link3
    {
        background: #574696;
    }
.link4
    {   
        background: #ee7202;
    }
.link5
    {
        background: #e61c67;
    }
.link6
    {
        background: #96c11f;
    }

这是我正在做的一个示例:http://www.ragnarok.ws .

目前，我没有足够的链接(或知识)将链接与左右边距对齐(与 Logo 的左侧和社交媒体图标的右侧对齐)到一个点它看起来不分散和愚蠢，所以我认为我的下一个最佳选择是尝试将链接的 div 居中。我链接的编码也有点粗糙。我还没有机会去清理东西。

非常感谢任何建议。

Answer 1

从 .menu 和 .menu a 中删除 float:left 并添加

margin: 0 auto;

到 .menu 使链接居中。

此外，将 display 从 block 更改为 inline-block for .menu a

请记住为 .menu 指定宽度。我刚刚通过 Inspect Element 尝试了 61% 的宽度，结果是正确的。

或

添加

text-align: center;

到.menu

并将 display 从 block 更改为 inline-block for .menu a。

在此方法中无需为 .menu 指定宽度。可能是最简单的解决方案。