css 文本在div中间是否可以用简单的方法?[duplicate]

n53p2ov0  于 2023-01-22  发布在  其他
关注(0)|答案(1)|浏览(92)
    • 此问题在此处已有答案**:

How can I center text (horizontally and vertically) inside a div block?(27个答案)
How can I vertically center a div element for all browsers using CSS?(48个答案)
昨天关门了。
我试着把我的文本放在我的div的中间,但是我没有找到一个很好的解决方案和干净。与填充的div增长,这不是我想要的。我可以创建一个div框,但它有点棘手,当代码复杂的增长,这可能会增加问题。所以如果有一个简单的解决方案,我想知道它,像TextAlign : "center",但垂直,而不仅仅是水平。

import "./styles.css";

export default function App() {
  const style = {
    border: "1px solid black",
    // padding: "50px 0 0 0", // padding is not good
    // textAlign : "center"; // but for the vertical that's possible ?
    width: "100px",
    height: "100px"
  };
  return (
    <div className="App">
      <div style={style}>milieu</div>
    </div>
  );
}

我在代码沙盒上的尝试:https://codesandbox.io/s/brave-ellis-d9ju09?file=/src/App.js:0-366
预期结果:

xtfmy6hx

xtfmy6hx1#

你可以使用flexbox来垂直和水平居中对齐一个元素。
你可以使用这个工具来学习flexbox -https://flexboxfroggy.com/

border: "1px solid black",
width: "100px",
height: "100px",
display: "flex",
alignItems: "center",
justifyContent: "center"

相关问题