Question

我有一些按钮，我想在div中垂直和水平对齐，也可以堆叠在彼此的顶部而不是并排

在我的CSS中，我似乎只能让它们对齐或堆叠，但不是两者。什么是正确的方法？

HTML：

<div id="sidePanel">
  <div id="buttonContainer">
    <button type="button" class="btn btn-primary btn-sm">Apple</button>
    <button type="button" class="btn btn-primary btn-sm">Apple</button>
    <button type="button" class="btn btn-primary btn-sm">Apple</button>
  </div>
</div>

<div id="itemList">
  item list
</div>

CSS：

#itemList {
  overflow: hidden;
  background: green;
}

#sidePanel {
  float: right;
  width: 300px;
  background: red;
}

#buttonContainer {
  width: 100%;
  border: 2px solid black;
  border-radius: 5px;
  text-align: center;
}

#buttonContainer button {
  display: block;
}

JSFiddle：https://jsfiddle.net/gjher92t/

Answer 1

你是什么意思，你希望他们堆叠和对齐？

如果您将显示更改为inline-block，那么当它们足以填充容器时，它们会堆叠...

#itemList {
  overflow: hidden;
  background: green;
}

#sidePanel {
  float: right;
  width: 300px;
  background: red;
}

#buttonContainer {
  width: 100%;
  border: 2px solid black;
  border-radius: 5px;
  text-align: center;
}

#buttonContainer button {
  display: inline-block;
}

<div id="sidePanel">
  <div id="buttonContainer">
    <button type="button" class="btn btn-primary btn-sm">Apple</button>
    <button type="button" class="btn btn-primary btn-sm">Apple</button>
    <button type="button" class="btn btn-primary btn-sm">Apple</button>
    <button type="button" class="btn btn-primary btn-sm">Apple</button>
    <button type="button" class="btn btn-primary btn-sm">Apple</button>
    <button type="button" class="btn btn-primary btn-sm">Apple</button>
    <button type="button" class="btn btn-primary btn-sm">Apple</button>
    <button type="button" class="btn btn-primary btn-sm">Apple</button>
    <button type="button" class="btn btn-primary btn-sm">Apple</button>
    <button type="button" class="btn btn-primary btn-sm">Apple</button>
    <button type="button" class="btn btn-primary btn-sm">Apple</button>
  </div>
</div>

<div id="itemList">
  item list
</div>

或者更改容器的text-align属性以将它们对齐，而不是居中......

#itemList {
  overflow: hidden;
  background: green;
}

#sidePanel {
  float: right;
  width: 300px;
  background: red;
}

#buttonContainer {
  width: 100%;
  border: 2px solid black;
  border-radius: 5px;
  text-align: left;
}

#buttonContainer button {
  display: inline-block;
}

<div id="sidePanel">
  <div id="buttonContainer">
    <button type="button" class="btn btn-primary btn-sm">Apple</button>
    <button type="button" class="btn btn-primary btn-sm">Apple</button>
    <button type="button" class="btn btn-primary btn-sm">Apple</button>
    <button type="button" class="btn btn-primary btn-sm">Apple</button>
    <button type="button" class="btn btn-primary btn-sm">Apple</button>
    <button type="button" class="btn btn-primary btn-sm">Apple</button>
    <button type="button" class="btn btn-primary btn-sm">Apple</button>
    <button type="button" class="btn btn-primary btn-sm">Apple</button>
    <button type="button" class="btn btn-primary btn-sm">Apple</button>
    <button type="button" class="btn btn-primary btn-sm">Apple</button>
    <button type="button" class="btn btn-primary btn-sm">Apple</button>
  </div>
</div>

<div id="itemList">
  item list
</div>

或添加margin: 0 auto让它们堆叠在容器的中间：

#itemList {
  overflow: hidden;
  background: green;
}

#sidePanel {
  float: right;
  width: 300px;
  background: red;
}

#buttonContainer {
  width: 100%;
  border: 2px solid black;
  border-radius: 5px;
  text-align: center;
}

#buttonContainer button {
  display: block;
  margin:0 auto;
}

<div id="sidePanel">
  <div id="buttonContainer">
    <button type="button" class="btn btn-primary btn-sm">Apple</button>
    <button type="button" class="btn btn-primary btn-sm">Apple</button>
    <button type="button" class="btn btn-primary btn-sm">Apple</button>
    <button type="button" class="btn btn-primary btn-sm">Apple</button>
    <button type="button" class="btn btn-primary btn-sm">Apple</button>
    <button type="button" class="btn btn-primary btn-sm">Apple</button>
    <button type="button" class="btn btn-primary btn-sm">Apple</button>
    <button type="button" class="btn btn-primary btn-sm">Apple</button>
    <button type="button" class="btn btn-primary btn-sm">Apple</button>
    <button type="button" class="btn btn-primary btn-sm">Apple</button>
    <button type="button" class="btn btn-primary btn-sm">Apple</button>
  </div>
</div>

<div id="itemList">
  item list
</div>

Answer 2

使用margin: auto;进行居中对齐。

＆＃13;

#itemList {
  overflow: hidden;
  background: green;
}
#sidePanel {
  float: right;
  width: 300px;
  background: red;
}
#buttonContainer {
  width: 100%;
  border: 2px solid black;
  border-radius: 5px;
  text-align: center;
}
#buttonContainer button {
  display: block;
   margin: auto;
}

＆＃13;

<div id="sidePanel">
  <div id="buttonContainer">
<button type="button" class="btn btn-primary btn-sm">Apple</button>
<button type="button" class="btn btn-primary btn-sm">Apple</button>
<button type="button" class="btn btn-primary btn-sm">Apple</button>
  </div>
</div>

<div id="itemList">
  item list
</div>

＆＃13;

使用显示块时CSS集中

2 个答案: