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

为什么我们需要显示块来居中按钮[复制]

css

Curnelious · 技术社区 · 5 年前

这可能是基本的,但我在一本书中读到,在一个中心的东西 div 你应该:

  margin-left: auto;
  margin-right: auto;
  width:70%;

所以你给它一个 width 并设置 auto margin . 与 button

  display: block;

为什么在这种情况下我们需要它阻止?

3 回复 | 直到 5 年前

flppv 5 年前

inline / inline-block auto 的值 margin

如果你不想让它成为一个中心按钮 block ,您可以使用 text-align: center 在它的父母身上。

另外,如果按钮被一个 flex grid 起源。

我在下面加了几个例子。

.wrapper-center {
  padding: 20px;
  border: 1px solid blue;
  text-align: center;
}

/* ----- */

.wrapper {
  padding: 20px; 
  margin-top: 20px;
  border: 1px solid red;
}

.centered-button {
  display: block;
  margin: 0 auto;
}

/* ----- */

.flex-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  padding: 20px; 
  border: 1px solid green;
}

<div class="wrapper-center">
  <button>Test</button>
</div>

<div class="wrapper">
  <button class="centered-button">Test</button>
</div>

<div class="flex-wrapper">
  <button>Test</button>
</div>

EngineersBox 5 年前

Display: block

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前