为什么这个内部div在包含div的内部居中，而按钮却不居中？

Question

null

body {
  color: white;
  background-color: #1E1B1B;
  border-color: grey;
}

.nav-col {
  background-color: transparent;
  margin: 10px;
  padding: 10px;
  font-size: 30px;
  border: 1px solid grey;
  height: 700px;
  width: 150px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="nav-col">
  <div style="text-align:center"><i class="fa fa-home"></i></div>
  <button style="text-align:center;"><i class="fa fa-home"></i></button>
</div>

null

Answer 1

div和按钮都不居中。

div和按钮的内容位于div和按钮的中心。

div是它所在容器的宽度（您可以通过在其上设置一个背景颜色来看到这一点）。按钮是它所需的最小宽度。

null

body {
  color: white;
  background-color: #1E1B1B;
  border-color: grey;
}

.nav-col {
  background-color: transparent;
  margin: 10px;
  padding: 10px;
  font-size: 30px;
  border: 1px solid grey;
  height: 700px;
  width: 150px;
}

.nav-col > div {
  background: red;
}

<div class="nav-col">
  <div style="text-align:center">contents</div>
  <button style="text-align:center;">contents</button>
</div>