Question

我想把按钮放在另一个下面并居中，但我不知道该怎么做。目前它们是并排的，不是集中的。

按钮：

<img src="assets/img/logo.png"/>
<button ion-button round class="button">Acessar</button>
<button ion-button round class="button">Tutorial</button>
<button ion-button round class="button">Sobre</button>

的CSS：

.wallpaper {
    background-color: #25d298;
}

.button {
    background-color: #d24125;
    text-align: center;
    margin: 20;
}

我该怎么做？

Answer 1

首先，你应该把你的按钮放在DIV元素中，然后你应该能够在DIV中对它们进行文本对齐。

<img src="assets/img/logo.png"/>
<div class="button-wrapper">
    <button ion-button round class="button">Acessar</button>
</div>
<div class="button-wrapper">
    <button ion-button round class="button">Tutorial</button>
</div>
<div class="button-wrapper">
    <button ion-button round class="button">Sobre</button>
</div>

然后是CSS：

.button-wrapper {
    margin: 20px;
    text-align: center;
}

.button {
    background-color: #d24125;
}

请注意，空间现在由包装器控制？这是与按钮样式相对的最佳方法。

如果你想让你的包装DIV里面的按钮没有每个按钮的DIV，你可以这样做：

<img src="assets/img/logo.png"/>
<button ion-button round class="button">Acessar</button>
<button ion-button round class="button">Tutorial</button>
<button ion-button round class="button">Sobre</button>

随附CSS：

.button {
    display: block;
    margin: 20px auto;
}

Answer 2

这是HTML：

<img src="assets/img/logo.png"/>
<div class="wrapper">
  <button ion-button round class="button">Acessar</button>
  <button ion-button round class="button">Tutorial</button>
  <button ion-button round class="button">Sobre</button>
</div>

CSS：

.wrapper {
  width: 20%;
}

.button {
  margin: 10px auto 10px;
  display: block;
}

display：block使按钮被视为块级元素，将每个按钮强制为新行。
auto左侧/右侧边距中心每个按钮都在任何容器中。 div仅作为示例包含在内。
10px上下边距为您提供上/下的间距。

codepen.io/johndoyle/pen/xrMwvy

希望这会有所帮助 - 祝你好运！

如何分离和居中按钮？

2 个答案: