Question 46108 in CSS Question posted in
Some basic documentation can be found here.

make <ul> center vertically by bootstrap – CSS

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.

Tags:

2

Answers


  1. 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>
    Login or Signup to reply.
  2. 0

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

    global.css

    ul {
   margin : 0;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search