How to center align item

Question

I have a problem with centering the ul tag. I want the "Q&A", "about" and Conditions&T above the "having trouble with the site?" heading..... I do not understand where I need to add and what. i have tried justify-content: center; not working I want the ul to be centered Would appreciate help.

I have attached the relevant code

      <footer
    class="footer-basic"
    style="
      padding: 3px;
      width: 100%;
      border-top: 1px solid var(--bs-gray-500);
      bottom: 0;
      position: absolute;
      padding: 40px 0;
      background-color: #ffffff;
      color: #4b4c4d;
      align-items: center;
    "
  >
    <ul
      class="list-inline"
      style="
        list-style: none;
        text-align: center;
        font-size: 18px;
        align-items: center;
        display: inline-block;
        position: relative;
      "
    >
      <li
        class="list-inline-item"
        style="
          padding: 0px 10px;
          height: 28.8px;
          margin: 0px 8px 0px 0px;
          display: inline;
        "
      >
        <a
          href="#"
          style="
            color: inherit;
            text-decoration: none;
            opacity: 0.8;
            margin: 0px;
            padding: 0px;
          "
          >Q&amp;A</a
        >
      </li>
      <li
        class="list-inline-item"
        style="
          padding: 0px 10px;
          height: 28.8px;
          margin: 0px 8px 0px 0px;
          display: inline;
        "
      >
        <a
          href="#"
          style="
            color: inherit;
            text-decoration: none;
            opacity: 0.8;
            margin: 0px;
            padding: 0px;
          "
          >About</a
        >
      </li>
      <li
        class="list-inline-item"
        style="
          padding: 0px 10px;
          width: a;
          height: 28.8px;
          margin: 0px 8px 0px 0px;
          display: inline;
        "
      >
        <a
          href="#"
          style="
            color: inherit;
            text-decoration: none;
            opacity: 0.8;
            margin: 0px;
            padding: 0px;
          "
          >Conditions&amp;Terms</a
        >
      </li>
    </ul>
    <h2
      class="fw-bold"
      style="text-align: center; font-size: 13px; color: #aaa; margin-bottom: 0"
    >
      " <br />having trouble with the site?<br /><br />CONTACT US:<br />shapeTechnicalTeam@gmail.com<br />
    </h2>
    <p
      class="text-end copyright"
      style="
        width: auto;
        height: 19.5px;
        margin: 0px;
        padding: 0px;
        text-align: right;
        opacity: 0.8;
      "
    >
      Shape © 2022&nbsp; &nbsp;
    </p>
  </footer>

UPinar · Accepted Answer · 2022-04-10T18:08:50.877

1

Can you please change ul class display:inline-block to display: block and there is a 40px padding-left in ul tag but i can't find it.

You can simply add

padding: 0;

for that 40px

edited Apr 10 '22 at 18:08

answered Apr 10 '22 at 18:03

UPinar

1,067
1
2
16

score 0 · Answer 2 · answered Apr 10 '22 at 17:49

      <footer
    class="footer-basic"
    style="
      padding: 3px;
      width: 100%;
      border-top: 1px solid var(--bs-gray-500);
      bottom: 0;
      position: absolute;
      padding: 40px 0;
      background-color: #ffffff;
      color: #4b4c4d;
      align-items: center;
    "
  >
  <style type="text/css">
    .wrapper {
        text-align: center;
    }
    .wrapper ul {
        display: inline-block;
        margin: 0;
        padding: 0;
       
        *display: inline;
    }
    .wrapper li {
        float: left;
        padding: 2px 5px;
    }
</style>
  <div class="wrapper">
    <ul
      class="list-inline"
      style="
        list-style: none;
        text-align: center;
        font-size: 18px;
        align-items: center;
        display: inline-block;
        position: relative;
      "
    >
      <li
        class="list-inline-item"
        style="
          padding: 0px 10px;
          height: 28.8px;
          margin: 0px 8px 0px 0px;
          display: inline;
        "
      >
        <a
          href="#"
          style="
            color: inherit;
            text-decoration: none;
            opacity: 0.8;
            margin: 0px;
            padding: 0px;
          "
          >Q&amp;A</a
        >
      </li>
      <li
        class="list-inline-item"
        style="
          padding: 0px 10px;
          height: 28.8px;
          margin: 0px 8px 0px 0px;
          display: inline;
        "
      >
        <a
          href="#"
          style="
            color: inherit;
            text-decoration: none;
            opacity: 0.8;
            margin: 0px;
            padding: 0px;
          "
          >About</a
        >
      </li>
      <li
        class="list-inline-item"
        style="
          padding: 0px 10px;
          width: a;
          height: 28.8px;
          margin: 0px 8px 0px 0px;
          display: inline;
        "
      >
        <a
          href="#"
          style="
            color: inherit;
            text-decoration: none;
            opacity: 0.8;
            margin: 0px;
            padding: 0px;
          "
          >Conditions&amp;Terms</a
        >
      </li>
    </ul>
    </div>
    <h2
      class="fw-bold"
      style="text-align: center; font-size: 13px; color: #aaa; margin-bottom: 0"
    >
      " <br />having trouble with the site?<br /><br />CONTACT US:<br />shapeTechnicalTeam@gmail.com<br />
    </h2>
    <p
      class="text-end copyright"
      style="
        width: auto;
        height: 19.5px;
        margin: 0px;
        padding: 0px;
        text-align: right;
        opacity: 0.8;
      "
    >
      Shape © 2022&nbsp; &nbsp;
    </p>
  </footer>

use display: inline-block; and wrap it in a centered div.

How to center align item

2 Answers2