Question

我在CSS中具有以下按钮，但无法使其居中对齐：

SELECT batterij ,timestamp FROM temphobbykamer WHERE nodeid= 113 AND timestamp >= 1527889336634 AND timestamp <= 1530481336634 AND ROWID % 20 =0

当它居中时，我希望它降低一点（底部）。

Answer 1

将按钮居中？

1。将按钮水平居中放置在父母内部？

您可以在父元素上使用display: flex; justify-content: center。

.parent{
  display: flex;
  justify-content: center;
}
.btn {
  background-color: #44c767;
  -moz-border-radius: 28px;
  -webkit-border-radius: 28px;
  border-radius: 28px;
  border: 1px solid #18ab29;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: 'Raleway', sans-serif;
  font-size: 17px;
  padding: 16px 64px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #2f6627;
}

<div class="parent">
  <button class="btn">Button</button>
</div>

或者您也可以在父元素上使用text-align: center。

.parent{
  text-align: center;
}
.btn {
  background-color: #44c767;
  -moz-border-radius: 28px;
  -webkit-border-radius: 28px;
  border-radius: 28px;
  border: 1px solid #18ab29;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: 'Raleway', sans-serif;
  font-size: 17px;
  padding: 16px 64px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #2f6627;
}

<div class="parent">
  <button class="btn">Button</button>
</div>

2。将按钮垂直居中放置在父母内部？

您可以在父元素上使用display: flex; align-items: center。

.parent{
  height: 100vh;
  background: #f00;
  display: flex;
  align-items: center;
}
.btn {
  background-color: #44c767;
  -moz-border-radius: 28px;
  -webkit-border-radius: 28px;
  border-radius: 28px;
  border: 1px solid #18ab29;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: 'Raleway', sans-serif;
  font-size: 17px;
  padding: 16px 64px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #2f6627;
}

<div class="parent">
  <button class="btn">Button</button>
</div>

3。在父级中将按钮水平和垂直居中？

您可以在父元素上使用display: flex; justify-content: center; align-items: center。

.parent{
  height: 100vh;
  background: #f00;
  align-items: center;
  display: flex;
  justify-content: center;
}
.btn {
  background-color: #44c767;
  -moz-border-radius: 28px;
  -webkit-border-radius: 28px;
  border-radius: 28px;
  border: 1px solid #18ab29;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: 'Raleway', sans-serif;
  font-size: 17px;
  padding: 16px 64px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #2f6627;
}

<div class="parent">
  <button class="btn">Button</button>
</div>

=>将按钮在父对象内部稍微降低一点并保持其居中吗？

您可以在按钮上使用margin-top: 5vh;。

.parent{
  height: 100vh;
  background: #f00;
  align-items: center;
  display: flex;
  justify-content: center;
}
.btn {
  margin-top: 50vh;
  background-color: #44c767;
  -moz-border-radius: 28px;
  -webkit-border-radius: 28px;
  border-radius: 28px;
  border: 1px solid #18ab29;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: 'Raleway', sans-serif;
  font-size: 17px;
  padding: 16px 64px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #2f6627;
}

<div class="parent">
  <button class="btn">Button</button>
</div>

如何对齐以使按钮在CSS中居中？

1 个答案: