html - 在 css 中对齐 3 个元素

Question

我有 3 个元素要在我的 html 文件中对齐。我附上了一张示例图片，第一张图片只有左边距并且垂直居中。中间元素垂直和水平居中，第三个元素有右边距并垂直居中。

我可以使用以下代码独立地水平和垂直对齐元素:

#element{
    height : 40%;
    position : relative;
    left : 50%;
    top : 50%;
    transform : translate(-50%,-50%);
}

但是当涉及到元素彼此对齐时，它们并没有正确放置。
如果你能帮我解决这个问题，我将不胜感激。
非常感谢

Answer 1

您可以尝试以下方法:

.left_item {
  float: left;
  width: 10%;
}
.right_item {
  float: right;
  width: 10%;
}
.center_item {
  float: left;
  width: 80%;
}