将按钮对齐到中心，我做错了啥？

Posted 2023-03-22

【中文标题】将按钮对齐到中心，我做错了啥？

【英文标题】：Aligning buttons to center, what am i doing worng?将按钮对齐到中心，我做错了什么？

【发布时间】：2021-09-04 15:17:03

【问题描述】：

这里有聪明人，谁能明白我为什么不能对齐我的按钮？ 我已经尝试了 2 天了，但我仍然不知道怎么了... 我尝试过 Items-aligned，但它缩短了我似乎无法更改的按钮的宽度...

<style id="remote-buttons">
:root 
  --dashboard-unit-width: 48px;
  --dashboard-unit-height: 48px;

.nr-dashboard-template 
    padding: 0px;
    

.remote-button:not([disabled]):hover
     background-color: #4CAF50 !important;


/*   This is the normal button definition  */
.remote-button
    background-color: MediumSeaGreen !important;
    color: #FFFFFF !important;
    height: var(--dashboard-unit-height);
    width: 100%;
    border-radius: 10px;
    font-size:1.0em;
    font-weight:normal;
    margin: 0;
    min-height: 36px;
    min-width: unset;
    line-height: unset;

【问题讨论】：

你能创建一个最小可重现的例子吗？包括html和css？因为没有它，没有人能帮助你。使按钮居中通常非常简单。给出的解决方案都没有失败的原因是您没有提供导致问题的部分。

【参考方案1】：

试试margin: 0 auto; 和display: block;

.remote-button
    background-color: MediumSeaGreen !important;
    color: #FFFFFF !important;
    height: var(--dashboard-unit-height);
    width: 100%;
    border-radius: 10px;
    font-size:1.0em;
    font-weight:normal;
    margin: 0 auto;   /* Added this */
    display: block;   /* Added this */
    text-align: center; /* Added this */
    min-height: 36px;
    min-width: unset;
    line-height: unset;

【讨论】：

嗯，我试过了，它似乎可以解决问题，它看起来一样...我已经手动将按钮的小部件大小更改为 1x4，这可能有问题吗？

@Brokhus 我会更新我的答案。希望它现在有效！

【参考方案2】：

您可以通过提供容器text-align: center; 轻松居中，但为了更好的解决方案，请附上 html 代码或将其放入 https://codepen.io/

【讨论】：

我希望这不会太愚蠢，但我尝试将代码放在问题中？将 text-align:center 放在哪里是个好主意？我试过很多次，但不能让它看起来有效

我使用这个模板作为按钮... ' 序列号 '

【参考方案3】：

尝试一下

margin: 0 auto;

并使文本居中对齐

text-align: center;