Как выровнять по центру элемент <ui>

У меня проблема с центрированием тега ul. Я хочу, чтобы «Вопросы и ответы», «о» и «Условия и ответы» были выше «проблемы с сайтом?» заголовок..... Я не понимаю, где мне нужно добавить и что. я пытался выравнивание содержимого: по центру; не работает Я хочу, чтобы ul был в центре Буду признателен за помощь.enter image description here

Я прикрепил соответствующий код

      <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>
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
0
0
21
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

      <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>

используйте display: inline-block; и оберните его в центрированный div.

Ответ принят как подходящий

Не могли бы вы изменить класс ul display:inline-block на display: block, и в теге ul есть отступ 40px слева, но я не могу его найти.

Вы можете просто добавить

padding: 0;

за эти 40px

Другие вопросы по теме