如何使用CSS将同一Div中的多个元素对齐

Question

我正在尝试在一个div中水平对齐4个元素，但运气不好。

我尝试对元素使用>>> print('cos(270) is', round(math.cos(math.radians(270)), 2)) cos(270) is -0.0 的{​​{1}}，inline-block，但是没有任何对齐的方法，可以使用一些帮助。

我的元素

float left

我的CSS：

margin-rights

这是它的外观：

这是当前外观：

我能在对准方面得到帮助吗？

Answer 1

Flex可以帮助您实现这一目标：

.counter {
    display: flex;
    align-items: center;
}

Answer 2

您很亲密：

.counter {
  display: inline-block;
  border: 1px grey solid;
  width: 19em;
  flex-direction: column;
  margin-bottom: 2em;
  text-align: right;
  white-space: nowrap;
  font-family: sans-serif;
}

.counter-btn {
  background-color: lightslategrey;
  border: none;
  border-radius: 25px;
  font-size: 1.5em;
  color: white;
  display: inline-block;
}

.quantity {
  float:left;
  padding-right: 1em;
}
.count {
  display: inline-block;
}