Question

我刚刚从10年的网页设计中恢复过来。我已经接近了解div属性的内部和外部（那些在我今天不像现在那样受欢迎）。现在我想尝试这样的布局：

标志|图标Div Banner Div Link Div 内容部页脚Div

目前我的问题是以Link 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。

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

非常感谢任何建议。

Answer 1

从float:left和.menu移除.menu a，然后添加

margin: 0 auto;

到.menu以使链接居中。

此外，将您的display从block改为inline-block .menu a

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

或

添加

text-align: center;

到.menu

并将display从block更改为inline-block .menu a。{/ p>
无需在此方法中指定.menu的宽度。可能是最简单的解决方案。

Answer 2

取自Learn CSS Layout：

   .menu
    {
       width: 600px;
       margin: 0 auto;
    }

设置块级元素的width将阻止它向左和向右延伸到其容器的边缘。然后，您可以将左右边距设置为auto水平将该元素置于其容器中。元素将占用您指定的宽度，然后将剩余的空间均匀分割在两个边缘之间。

Div对齐问题

2 个答案: