0

I have this div that is parent for ul. I tried to make ul center vertically but I do not know why I see this situation: enter image description here

<div className=" d-flex align-items-center bg-primary  ">
            <ul
              className="d-flex align-items-center bg-success"
              style={{ gap: "3em" }}
            >
              <li className="bg-danger">vision</li>
              <li>consorzio</li>
              <li>contatti</li>
            </ul>
          </div>

the bg-success is not got centered in bg-primary div.

Negar Nasiri
  • 177
  • 2
  • 9
  • 1
    Try adding `{margin: 0}` on the `
      ` element. Likely the default margin-bottom on the `
        ` created a visual offset.
     – jjj Mar 07 '23 at 22:23

2 Answers2

1

Generally ul elements by default have margin you should remove it first :

global.css

ul {
   margin : 0;
}
Mehdi Faraji
  • 2,574
  • 8
  • 28
  • 76
0

<div className="d-flex align-items-center bg-primary">
  <ul className="d-flex align-items-center bg-success justify-content-center" style={{ gap: "3em" }}>
    <li className="bg-danger">vision</li>
    <li>consorzio</li>
    <li>contatti</li>
  </ul>
</div>
IlCorsaroNero
  • 351
  • 1
  • 10