主页 / 问题 / 1601486
Accepted
JustADude
Asked:2024-12-03 01:56:43 +0000 UTC2024-12-03 01:56:43 +0000 UTC

如何在 HTML 中相对于 x 轴将按钮放置在中间 [关闭]

  • 772

如果我已经创建了一个按钮

<button>text</button>

我需要将它放在相对于 x 轴的中间，那么如何使用 css 来做到这一点？

html

2 个回答

  1. Best Answer

    以下是截至 2024 年 12 月上旬最常见的水平和垂直居中方法：

    1.显示方式：网格

    .parent {
     display: grid;
     place-content: center
}

    2.显示：flex（方法1）

    .parent {
     display: flex;
     align-items: center;
     justify-content: center
}

    3.显示：flex（方法2）

    .parent {
     display: flex
}
.child {
     margin: auto
}

    4.位置：绝对（方法1）

    .parent {
     position: relative
}
.child {
     position: absolute;
     top: 50%;
     left: 50%;
     translate: -50% -50%
}

    5.位置：绝对（方法2）

    .parent {
     position: relative;
     --width: <Ширина дочернего элемента>;
     --height: <Высота дочернего элемента>
}
.child {
     position: absolute;
     top: 50%;
     left: 50%;
     width: var(--width);
     height: var(--height);
     margin: calc(-.5 * var(--width)) calc(-.5 * var(--height))
}
    • -1

  2. 有很多选择 - 这是其中之一。
    PS 的样式.example仅为了清晰起见而提供。

    我不是 CSS 专家，所以也许有人可以想出一个更优雅的解决方案。

    .example {
  height: 50px;
  border: 1px solid green;
}

button {
  margin: 0 auto;
  display: block;
}
    <div class="example">
  <button>Текст на кнопке</button>
</div>

    • -1

相关问题