使用 Material-Ui 和 CSS 水平对齐标题

Question

我需要将标题Hello John Joseph Jones 水平对齐在顶部但在黑框内。 它垂直占用空间的问题。 如果我的代码很好，我不会。如果有更好的方法，请随时修改。

代码沙盒在这里CLICK HERE

  <Box m={3}>
      <Grid
        container
        direction="column"
        className={classes.container}
        spacing={2}
      >
        {/* <h1>Hello John Joseph Jones</h1> */}
        <Grid item xs={6} className={classes.pictureSection}>
          <div className={classes.imageSection}>
            <img
              src="https://picsum.photos/id/237/200/300"
              className={classes.img}
              alt="no pic"
            />{" "}
            <p className={classes.precinctNo}>PR&nbsp; 4838390</p>
            <p className={classes.controlNo}>555555</p>
          </div>
        </Grid>

        <Grid item xs={6} className={classes.nameAddressSection}>
          <Box className={classes.fontText}>John Joseph Jones</Box>

          <Box mt={1} className={classes.fontText}>
            26 South Hawthorne Drive Tonawanda, NY 14150
          </Box>

          <Box mt={1}>
            <QRCode size={80} value={"4234432"} />
          </Box>
        </Grid>
      </Grid>
    </Box>

Answer 1

我已经编辑了你的代码：

插入新的 h1 标签，设置样式，并将 Grid 方向从 column 更改为 row。

import React from "react";
import { makeStyles } from "@material-ui/styles";
import { Box } from "@material-ui/core";
import Grid from "@material-ui/core/Grid";
import QRCode from "react-qr-code";
import { red } from "@material-ui/core/colors";

const useStyles = makeStyles(() => ({
  button: {
    color: "white"
  },
  hideButton: {
    visibility: "hidden"
  },
  imageSection: {
    display: "flex",
    flexDirection: "column",
    justifyContent: "center",
    height: "100%"
  },
  img: {
    height: "4cm",
    width: "4cm",
  },
  h1: { // new
    fontSize: "0.70rem",
    width: "100%",
    textAlign: "center",
    margin: "0.1rem"
  },
  precinctNo: {
    display: "flex",
    justifyContent: "center",
    margin: "0",
    fontSize: "0.70rem",
    fontWeight: "bold",
    textTransform: "uppercase",
    color: "#000"
  },
  controlNo: {
    display: "flex",
    justifyContent: "flex-start",
    margin: "0",
    fontSize: "0.70rem",
    fontWeight: "bold",
    textTransform: "uppercase",
    color: "#000"
  },
  boxBorder: {
    border: "3px solid black"
  },
  container: {
    width: "8.5cm",
    height: "5.5cm",
    borderRadius: "3px",
    border: "3px solid #000000",
    color: "#00000"
  },
  pictureSection: {
    display: "flex",
    flexBasis: "100%"
  },
  nameAddressSection: {
    display: "flex",
    flexDirection: "column",
    textAlign: "center",
    flexBasis: "100%",
    justifyContent: "space-between"
  },
  alignItems: {
    alignSelf: "center",
    textAlign: "center"
  },
  fontText: {
    color: "#000000",
    fontSize: "0.70rem",
    fontWeight: "bold",
    textTransform: "uppercase"
  }
}));

const SampleCard = () => {
  const classes = useStyles();

  return (
    <Box m={3}>
      <Grid
        container
        direction="row" // new
        className={classes.container}
        spacing={2}
      >
        <h1 className={classes.h1}>Hello John Joseph Jones</h1> // new
        <Grid item xs={6} className={classes.pictureSection}>
          <div className={classes.imageSection}>
            <img
              src="https://picsum.photos/id/237/200/300"
              className={classes.img}
              alt="no pic"
            />{" "}
            <p className={classes.precinctNo}>PR&nbsp; 4838390</p>
            <p className={classes.controlNo}>555555</p>
          </div>
        </Grid>

        <Grid item xs={6} className={classes.nameAddressSection}>
          <Box className={classes.fontText}>John Joseph Jones</Box>

          <Box mt={1} className={classes.fontText}>
            26 South Hawthorne Drive Tonawanda, NY 14150
          </Box>

          <Box mt={1}>
            <QRCode size={80} value={"4234432"} />
          </Box>
        </Grid>
      </Grid>
    </Box>
  );
};

export default SampleCard;

注意退货声明中的 cmets。 （我不知道他们会不会破坏你的申请）

Answer 2

你可以通过稍微改变结构来做到这一点

添加一个根类来保存主框

root: {
    width: "8.5cm",
    height: "5.5cm",
    border: "3px solid #000000",
    borderRadius: "3px",
    boxSizing: "border-box"
  },

从容器类中移除边框

  container: {
    color: "#00000",
    height: "100%"
  },

将其应用于父元素

<Box className={classes.root} m={3}>

添加居中文本

<Box mb={1} className={classes.fontText} align="center">
        Hello John Joseph Jones
</Box>

看看https://codesandbox.io/s/material-ui-forked-dvoun?file=/SampleCard.js:197-252

在上面的示例中，我为父元素添加了一些填充，因为现在它包含边框，可能还有其他方法可以保持样式

要保持固定大小，您需要使用元素