-1

I try to put my text in the middle of my div but I don't found a nice solution and clean. With padding the div growth, and it's not what I desire. I can create a div box, but it's little tricky and when the code grows in complexity that's can add problem. So if there is a simple solution, I want know it, like TextAlign : "center" but for the vertical, not only for the horizontal.

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>
  );
}

my try on code sandbox: https://codesandbox.io/s/brave-ellis-d9ju09?file=/src/App.js:0-366

result expected:

enter image description here

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
Knupel
  • 323
  • 2
  • 14
  • 1
    https://www.w3.org/Style/Examples/007/center.en.html#text under the "Centering vertically and horizontally in CSS level 3" heading – WOUNDEDStevenJones Jan 20 '23 at 18:47
  • thx, I find this way to @WOUNDEDStevenJones ` const temp_box = { position: "relative", top: 0, }; if(in_line === false) { temp_box["left"] = "50%"; } const temp_cell = { position: "absolute", top: "50%", left: "50%", webkitTransform: "translate(-50%, -50%)", transform: "translate(-50%, -50%)", };` with 2 nested div... because my problem is all the divs must be display in line for a menu. – Knupel Jan 21 '23 at 16:59

1 Answers1

0

you can make use of flexbox to align an element vertically and horizontally center.

you can use this tool to learn flexbox - https://flexboxfroggy.com/

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