文本对齐：中心未对齐 <nav> 部分中的按钮答案

【问题标题】：Text-align:center not aligning buttons in <nav> section文本对齐：中心未对齐 <nav> 部分中的按钮
【发布时间】：2020-08-23 03:22:55
【问题描述】：

我不确定这是此代码还是周围代码的问题。如您所见，当您运行代码 sn-p 时，使这些按钮居中非常有效。

<nav id="navbar" style="text-align:center">
    <div class="div">
    <button class="navbutton" onclick="window.location.href='index.html'" style="background-color:rgb(0,255,0);
    border:none;
    color:white;
    padding:15px 32px;
    text-align:center;
    display:inline-block;
    font-size:16px;">Home</button>
    <button class="navbutton" onclick="window.location.href='reviews.php'" style="background-color:rgb(0,255,0);
    border:none;
    color:white;
    padding:15px 32px;
    text-align:center;
    display:inline-block;
    font-size:16px;">Leave a review</button>
    <button class="navbutton" onclick="window.location.href='recommendations.php'"style="background-color:rgb(0,255,0);
    border:none;
    color:white;
    padding:15px 32px;
    text-align:center;
    display:inline-block;
    font-size:16px;">Current reviews</button>
    <button class="navbutton" onclick="window.location.href='mailto:info.awolindustries@gmail.com'" target="_blank" style="background-color:rgb(0,255,0);
    border:none;
    color:white;
    padding:15px 32px;
    text-align:center;
    display:inline-block;
    font-size:16px;">Contact us</button>
    </div>
</nav>

出于某种原因，在我的website 上，它只是把它变成了一堆按钮。

【问题讨论】：

标签： html css button text-align

【解决方案1】：

就像我之前说的，保持代码分开 :) 想象一下，如果你想为你的菜单设置不同的颜色，那么你将不得不在很多地方改变颜色。现在您将所有内容集中在一个地方，您可以查看其他人对设置的看法。

<nav id="navbar" style="text-align:center">
    <div class="div">
        <button class="navbutton" onclick="window.location.href='index.html'">Home</button>
        <button class="navbutton" onclick="window.location.href='reviews.php'">Leave a review</button>
        <button class="navbutton" onclick="window.location.href='recommendations.php'">Current reviews</button>
        <button class="navbutton" onclick="window.location.href='mailto:info.awolindustries@gmail.com'" target="_blank">Contact us</button>
    </div>
</nav>
<style>
    .navbutton {
  background-color:rgb(0,255,0);
    border:none;
    color:white;
    padding:15px 32px;
    text-align:center;
    display:inline-block;
    font-size:16px;
}
</style>

Your website:

【讨论】：

我喜欢你的想法，但它不能解决居中问题:(
div { 浮动：左；高度：250px；宽度：100%；填充：0 10px； }
只是改变你的 div 的宽度。您将其设置为 200 像素。做到 100%。
当我改变它时什么也没发生
然后，删除 float:left :) 现在呢？

【解决方案2】：

尽量保持代码整洁，外部文件的样式或至少分开。当您单击“留下评论”时，您的导航栏看起来像您希望的那样。

我复制了“离开评论”页面的代码：

<div class="div">
    <button class="navbutton" onclick="window.location.href='index.html'">Home</button>
    <button class="navbutton" onclick="window.location.href='reviews.php'">Leave a review</button>
    <button class="navbutton" onclick="window.location.href='recommendations.php'">Current reviews</button>
    <button class="navbutton" onclick="window.location.href='mailto:info.awolindustries@gmail.com'"
        target="_blank">Contact us</button>
</div>

【讨论】：

这就是我一直在做的事情。出于某种原因，我的托管服务不允许我在每个 HTML 页面上连接多个 CSS 文档，因此通过这样做，所有样式都消失了，而且它根本没有真正居中。
好的，我建议将所有 CSS 保留在

【解决方案3】：

您需要为该容器定义更大的宽度。在您的 CSS 中，将类 div 从 width: 200px; 更改为 width: 100%;

【讨论】：

嗯，我不太清楚你的意思。唯一带有“宽度”元素的是产品。我改变了它，但它没有做任何事情。
试试这个：在你的<nav>标签下把这个<div class="div">改成这个<div class="nav-buttons">。然后将该类添加到您的 CSS：.nav-buttons { width: 100%; }
等等，你是说id，还是说别的？

【解决方案4】：

这是因为在您的网站上，您为 div 元素设置了 200px 的固定宽度。删除它，按钮将进入一行；

【讨论】：