按钮中心 CSS

Posted 2023-02-22

【中文标题】按钮中心 CSS

【英文标题】：Button Center CSS

【发布时间】：2011-04-07 01:41:03

【问题描述】：

通常的 CSS 居中问题，只是不适合我，问题是我不知道完成的宽度 px

我有一个用于整个导航的 div，然后是里面的每个按钮，当有多个按钮时，它们不再居中。 :(

CSS

.nav
    margin-top:167px;
    width:1024px;
    height:34px;


.nav_button
    height:34px;
    margin:0 auto;
    margin-right:10px;
    float:left;

html

<div class="nav">
        <div class="nav_button">
            <div class="b_left"></div>
            <div class="b_middle">Home</div>
            <div class="b_right"></div>

        </div>
        <div class="nav_button">
            <div class="b_left"></div>
            <div class="b_middle">Contact Us</div>
            <div class="b_right"></div>

        </div>
</div>

任何帮助将不胜感激。谢谢

---

结果

如果宽度未知，我确实找到了一种将按钮居中的方法，虽然不完全满意但没关系，它可以工作：D

最好的办法是放在一张桌子上

<table class="nav" align="center">
    <tr>
      <td>
        <div class="nav_button">
            <div class="b_left"></div>
            <div class="b_middle">Home</div>
            <div class="b_right"></div>
        </div>

        <div class="nav_button">
            <div class="b_left"></div>
            <div class="b_middle">Contact Us</div>
            <div class="b_right"></div>
        </div>
      </td>
    </tr>
  </table>

【参考方案1】：

我意识到这是一个非常古老的问题，但我今天偶然发现了这个问题，我得到了解决

<div style="text-align:center;">
    <button>button1</button>
    <button>button2</button>
</div>

干杯， 标记

【讨论】：

请注意，在此元素附近具有向右/向左浮动样式的其他元素可能会使它看起来偏离中心。

我相信你是对的，但有理由不这样做<input class="btn btn-primary" style="text-align:center;display:block;" type="submit" value="% trans 'ButtonPurpose' %" />

【参考方案2】：

考虑将此添加到您的 CSS 以解决问题：

button 
    margin: 0 auto;
    display: block;

【讨论】：

最佳答案。没有外部容器，（可能）没有缺点。

【参考方案3】：

另一个不错的选择是使用：

width: 40%;
margin-left: 30%;
margin-right: 30%

【讨论】：

如果按钮只是 <Grid item>...</Grid> 内的一个按钮，它适用于 Material UI（并且很有意义）

哦好主意:)

【参考方案4】：

问题在于.nav_button 上的以下 CSS 行：

margin: 0 auto;

这只有在你有一个按钮时才有效，这就是为什么当有多个 nav_button div 时它们会偏离中心。

如果您希望所有按钮居中，请将 nav_buttons 嵌套在另一个 div 中：

<div class="nav">
    <div class="centerButtons">
        <div class="nav_button">
            <div class="b_left"></div>
            <div class="b_middle">Home</div>
            <div class="b_right"></div>
        </div>
        <div class="nav_button">
            <div class="b_left"></div>
            <div class="b_middle">Contact Us</div>
            <div class="b_right"></div>
        </div>
    </div>
</div>

并以这种方式设置样式：

.nav
    margin-top:167px;
    width:1024px;
    height:34px;


/* Centers the div that nests the nav_buttons */
.centerButtons 
    margin: 0 auto;
    float: left;
 

.nav_button
    height:34px;
    margin-right:10px;
    float: left;

【讨论】：

感谢您的帖子，不幸的是也不起作用，仍然在左侧。

是的，我刚刚意识到这一点。这是因为 .centerButtons 是一个块元素，它占据了 .nav 中的整个空间，使边距属性无用。我也尝试通过浮动 .centerButtons 来修复它，但没有运气。

是的，我知道它很棘手，这让我很恼火，因为我以前做过但不记得是怎么做到的:)....有什么想法吗？

【参考方案5】：

考虑将此添加到您的 CSS 以解决问题：

.btn 
  width: 20%;
  margin-left: 40%;
  margin-right: 30%;

【参考方案6】：

当一切都失败时，我只是

<center> content </center>

我知道它不再“符合标准”，但如果它有效，它就有效

【讨论】：

此答案不会向其他答案添加任何内容。 <center> 在 HTML4 中已被弃用，甚至在 HTML5 中也不支持，这意味着如果使用 HTML5，它可能无法工作。

我只有在无法进行其他工作时才使用它。我在有 html5 但不喜欢的页面中使用过它。我已经完成并用<div align="center">button</div>

替换了我能做的事情

不推荐使用的标签，使用它是一种不好的做法