创建一个内容居中的 CSS 正方形，最好使用 Semantic-UI

Question

我有一个 React 应用程序，在页面底部，在其余内容下方，我想创建一个完美的正方形（我们通常使用图像，但我想避免它) 中间有一个字母或图标。

我可以使用网格（即 7 列宽，第 4 列周围有 3 个空列）粗略地工作。我将中间列的样式设置为特定颜色，但如果我将字体设置得太大，则进入内部的文本开始...向右推。如果我使用图标，我会遇到类似的问题。有 good/right 的方法吗？

添加代码示例

这是我正在尝试做的一个例子。我希望内容在框中居中。我一次只会显示一个盒子，里面有一个字母或一个图标。该框最好位于页面的中央，如

Answer 1

如果您包含代码和视觉效果，这会容易得多。据我所知，你想要这样的东西：

.icons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.wrapper {
  position: relative;
  height: 0;
  padding-bottom: 100%;
  background-color: #fab;
}

.letter {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: break-word;
  font-size: 30px;
}

<div class="icons">
  <div>
    <div class="wrapper">
      <div class="letter">
        A
      </div>
    </div>
  </div>
  <div>
    <div class="wrapper">
      <div class="letter">
        B
      </div>
    </div>
  </div>
  <div>
    <div class="wrapper">
      <div class="letter">
        C
      </div>
    </div>
  </div>
</div>

Answer 2

没有特定的组件可以用语义来做这种事情。然而，一个简单的方法是创建一个小的 React 组件，它使用 flex 来居中您的内容。

这里是一个例子，我修改了你提供的codesandbox

import React from "react";
import { Label, Icon } from "semantic-ui-react";

const Square = ({ background, color, children }) => {
  const squareStyles = {
    width: 150,
    height: 150,
    textAlign: "center",
    fontSize: 5 + "em",
    lineHeight: 1 + "em",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: `#${background}`,
    color: `#${color}`
  };

  return <div style={squareStyles}>{children}</div>;
};

const Sample = () => (
  <div>
    <Square background="21BA45" color="fff">
      G
    </Square>
    <Label>OR</Label>
    <Square background="1B1C1D">
      <Icon name="flag checkered" inverted />
    </Square>
  </div>
);

export default Sample;

codesandbox

创建一个内容居中的 CSS 正方形，最好使用 Semantic-UI

Create a CSS square with centered content, ideally using Semantic-UI

css

semantic-ui