htmlcssgoogle-apps-scriptskeleton-css-boilerplate

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

So I am making an HTML sidebar in Google Sheets using Apps Script. I am also using the Skeleton CSS framework.

So I'd like the submit button here to be centered:

Sidebar

I've tried this: making an align class in CSS, and then applying it to the button. I forgot to mention that all my other elements are aligned except the buttons.

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

    h2{
      font-size: 16pt; 
    }

    </style>

Here is my HTML code:

  <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>

Thanks!

Solution

  • All of these 3 solutions should work, I would choose the second or third one.

    If you make the div full-width and add align to it, it should work

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

    You can also make the div a flex, like so (Use classes instead of inline style)

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

    You can also add margin:auto and float:none to the button (Use classes instead of inline style)

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