代码之家 › 专栏 › 技术社区 › Elijah

css中心3内联块按钮

button css html

-2

Elijah · 技术社区 · 2 年前

我有3个按钮 <button class="align" id="decrease">decrease</button> <button class="align" id="reset">reset</button> <button class="align" id="increase">increase</button> 和一个css类 .align{ position: absolute; right: 50%; display: inline-block; } 它使一些按钮居中,但最终结果看起来是这样的

我有没有办法把它们放在中心,同时把它们分开,或者我必须给它们分配一个单独的班级?

我原以为他们会因为 display: inline-block; 但它们只是叠在一起。我试过给他们留点余地,但没有奏效。

3 回复 | 直到 2 年前

Mark Schultheiss 2 年前

你有很多选择,最简单的就是 text-align:center; 在容器元素上-在本例中 <body> -或者我还展示了如何获得更多的控制——例如,在这里,我有一个在每个“列”和 5em 宽度,因此它们都占据相同的空间。笔记 16px = 1em 默认情况下,在大多数现代浏览器中,但我还是将其设置为基础。所以 5米 将为5 X 16=80px

注意:在这两个上,您都可以删除 .align{ display: inline-block; } 但那是你的问题,所以我把它留了下来。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 16px;
}

.align{ display: inline-block; } 
/* note this is the "container" but it could be a div or some other element */

body {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: repeat(3, 5em);
  align-items: center;
  justify-content: center;
  gap: 0.25em;
}

<button class="align" id="decrease">decrease</button> <button class="align" id="reset">reset</button> <button class="align" id="increase">increase</button>

最简单的选项:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.align{ display: inline-block; } 
/* note this is the "container" but it could be a div or some other element */

body {
  text-align: center;
}

<button class=“align”id=“reduce”>减少</按钮><button class=“align”id=“reset”>重置</按钮><button class=“align”id=“increase”>增加</按钮>

FerrnA 2 年前

您可以将这三个按钮与一个灵活的父容器对齐:

.container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;}

.control-button {margin: 0 5px;}

<div class="container">
  <button class="control-button" id="decrease">decrease</button>
  <button class="control-button" id="reset">reset</button>
  <button class="control-button" id="increase">increase</button>
</div>