javascript - 如何将元素水平居中并相对于其他元素定位？

我在React应用程序中有一个搜索栏（使用material-ui v4）。我有一个TextField，无论我将其放在左侧还是右侧，我总是希望水平居中。

本质上，我想相对于TextField放置其他所有内容，并将其“锚定”在中间。

我认为这在CSS中很简单，但我无法破解！

我可以使TextField本身以Grid Layout为中心没有问题，但是不能使按钮相对于它定位。

这是我到目前为止所拥有的。我感觉好像缺少了一些明显的东西！

import React from "react";
import "./styles.css";
import Paper from "@material-ui/core/Paper";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";
import { makeStyles } from "@material-ui/styles";

const useStyles = makeStyles({
  actionBarRootStyle: {
    display: "grid",
    justifyItems: "center",
    padding: 20
  },
  textFieldRootStyle: {
    border: "1px solid red"
  },
  buttonRootStyle: {
    //?????
  }
});

export default function App() {
  const styles = useStyles();
  return (
    <Paper
      square={true}
      classes={{
        root: styles.actionBarRootStyle
      }}
    >
         {/* How do I position this button relative to the TextField so the TextField always stays centered ?*/}
      <Button
        variant="contained"
        color="primary"
        classes={{
          root: styles.buttonRootStyle
        }}
      >
        Button to the Left
      </Button>

      <TextField
        variant="outlined"
        classes={{
          root: styles.textFieldRootStyle
        }}
      />
    </Paper>
  );
}

最佳答案

如果我正确遵循，则文本字段和按钮应该在同一个容器内，如果将容器设为position: relative，则可以使按钮position: absolute并将其宽度向左移动。然后，您可以将容器居中以达到所需的效果。

:root {
  --TEXTFIELD_WIDTH: 300px;
}

.container {
  display: flex;
  justify-content: center;
}

.controls {
  position: relative;
}

.buttons-left {
  position: absolute;
  transform: translateX(-100%);
}

.buttons-right {
  position: absolute;
  transform: translateX(var(--TEXTFIELD_WIDTH));
}

input[type="text"] {
  width: var(--TEXTFIELD_WIDTH);
}

<div class="container">
  <div class="controls">
    <div class="buttons-left">
      <button>First</button>
      <button>Second</button>
    </div>
    <div class="buttons-right">
      <button>Third</button>
      <button>Fourth</button>
    </div>
    <input type="text" />
  </div>
</div>

关于javascript - 如何将元素水平居中并相对于其他元素定位？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/61638828/