text-align:center 不适用于 Apps 脚本 HTML 侧边栏

Question

所以我正在使用 Apps 脚本在 Google 表格中制作一个 HTML 边栏。我也在使用 Skeleton CSS 框架。

所以我希望此处的提交按钮居中：

我试过这个：在 CSS 中对齐 class，然后将其应用到按钮。我忘了说除了按钮之外我所有的其他元素都是对齐的。

  <style>
    body{
      background-color: white; 
      color: black; 
    }
    .align{
      text-align: center; 
    }
    .margin{
      margin-bottom: 10px; 
    }
    h1{
      font-size: 20pt; 
    }

    h2{
      font-size: 16pt; 
    }

    </style>

这是我的 HTML 代码：

  <body>
    <h1 class = "align ">Welcome to the clothing expense custom menu bar!</h1>
    <h2 class = "align">Here are the custom functions you can use:</h2>
    <p class = "align"> See how much you've spent on a brand.</p>
    <form onsubmit="runFunc()">
      <input class = "u-full-width " id="brand" type = "text" placeholder="Enter brand name">
      <div>
        <button type="submit" class="button-primary align">Submit</button>
      </div>
    </form>


    <p class = "align"> See how much you've spent on a type of clothing.</p>

    <form onsubmit="runFuncTwo()">
      <input class = "margin u-full-width" id="type" type = "text" placeholder="Enter clothing brand">
      <div>
        <button type="submit" class="button-primary align">Submit</button>
      </div>
    </form>
  </body>

谢谢！

Answer 1

密码是：

    button.button-primary.align {
    width: 100%;
    max-width: 150px;
    margin: 0 auto;
    display: block;
}

它正在运行：

body{
      background-color: white; 
      color: black; 
    }
    .align{
      text-align: center; 
    }
    .margin{
      margin-bottom: 10px; 
    }
    h1{
      font-size: 20pt; 
    }

    h2{
      font-size: 16pt; 
    }
    /*new code from here*/
    
    button.button-primary.align {
    width: 100%;
    max-width: 150px;
    margin: 0 auto;
    display: block;
}

<body>
    <h1 class = "align ">Welcome to the clothing expense custom menu bar!</h1>
    <h2 class = "align">Here are the custom functions you can use:</h2>
    <p class = "align"> See how much you've spent on a brand.</p>
    <form onsubmit="runFunc()">
      <input class = "u-full-width " id="brand" type = "text" placeholder="Enter brand name">
      <div>
        <button type="submit" class="button-primary align">Submit</button>
      </div>
    </form>


    <p class = "align"> See how much you've spent on a type of clothing.</p>

    <form onsubmit="runFuncTwo()">
      <input class = "margin u-full-width" id="type" type = "text" placeholder="Enter clothing brand">
      <div>
        <button type="submit" class="button-primary align">Submit</button>
      </div>
    </form>
  </body>

Answer 2

这 3 个解决方案都应该有效，我会选择第二个或第三个。

如果你制作 div 全角并添加 align ，它应该可以工作

<div class="u-full-width align">
    <button type="submit" class="button-primary">Submit</button>
</div>

您也可以将 div 设为 flex，就像这样（使用类而不是内联样式）

<div class="u-full-width" style="display:flex; justify-content: center">
    <button type="submit" class="button-primary">Submit</button>
</div>

您还可以将 margin:auto 和 float:none 添加到按钮（使用类而不是内联样式）

<button type="submit" class="button-primary"
        style="margin:auto; float:none">Submit</button>

Answer 3

css:

 h1{
      font-size: 20pt; 
      width:100%;
    }

    h2{
      font-size: 16pt; 
      width:100%;

    }

html:添加span标签内的所有文本内容:

<h1 class = "align "><span>Welcome to the clothing expense custom menu bar! </span></h1>

text-align:center 不适用于 Apps 脚本 HTML 侧边栏

text-align:center is not working on Apps Script HTML sidebar

html

css

google-apps-script

skeleton-css-boilerplate