代码之家  ›  专栏  ›  技术社区  ›  A.S.J

如何根据屏幕大小对齐中间的按钮?

  •  2
  • A.S.J  · 技术社区  · 8 年前

    有没有办法将按钮(或任何其他物体)对准屏幕中央(这适用于任何大小的计算机屏幕)? 我正在做一个项目,尝试将按钮包装到div中,并设置文本对齐:居中,但按钮仍然偏离中心,我想知道是否有其他方法可以做到这一点? 事先非常感谢。

    2 回复  |  直到 8 年前
        1
  •  4
  •   Community Mohan Dere    6 年前

    原因是 text-align: center 当您将其设置为 button 在内部

    button {
     text-align: center;
    }
    <button>Button</button>

    text-align: left .

    button {
     width: 70vw;
     text-align: left;
    }
    <按钮(>);按钮(<)/按钮(>);

    文本对齐:居中 .

    div {
     text-align: center;
    }
    <div>
      <button>Button</button>
    <div>

    display: block; 并应用 margin: 0 auto . 这使我们不必将按钮包装在容器元素中。

    button {
      display: block;
      margin: 0 auto;
    }
    <
        2
  •  -1
  •   Ballard    8 年前

    这应该行得通。

    .container {
        margin: auto;
        width: 100px;
    }
    <div class="container">
        <button>Submit</button>
    </div>