Список по центру абзаца

Question

У меня есть этот список внизу страницы, и когда я наводю указатель мыши на каждое число, появляется предложение, однако я хочу, чтобы абзац с предложением отображался по центру в середине страницы, так что почти все в той же позиции, как я могу это сделать?

Изображения прикреплены, чтобы помочь 1 - 2

.dotMenu {
  margin-left: auto;
  text-align: center;
  margin-right: auto;
  margin-bottom: -50px;
  position: relative;
  margin-left: 5%;
  margin-right: 5%;
}

.dotMenu ul li {
  height: 30px;
  width: 30px;
  background-color: #222954;
  border-radius: 50%;
  text-align: center;
  font-family: Lovelo Pro;
  line-height: 30px;
  display: inline-block;
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.dotMenu ul li a {
  text-decoration: none;
  color: #FDBA3B;
}

.dotMenu ul li:hover {
  background-color: white;
}

.dotMenu ul li p {
  display: none;
}

.dotMenu ul li:hover p {
  display: inline-block;
  position: absolute;
}

<div class="dotMenu">
  <ul>
    <li><a href="#">1</a>
      <p>Cascading Web Design with Feature Queries</p>
    </li>
    <li><a href="#">2</a>
      <p>Lint the Web Forward With Sonarwhal</p>
    </li>
    <li><a href="#">3</a>
      <p>Web Content Accessibility Guidelines—for People Who Haven't Read Them</p>
    </li>
    <li><a href="#">4</a>
      <p>Jobs-to-Be-Done in Your UX Toolbox</p>
    </li>
    <li><a href="#">5</a>
      <p>Levelling Up for Junior Developers</p>
    </li>
    <li><a href="#">6</a>
      <p>Designing a Remote Project</p>
    </li>
    <li><a href="#">7</a>
      <p>Automating Your Accessibility Tests</p>
    </li>
    <li><a href="#">8</a>
      <p>Stop Leaving Animation to the Last Minute</p>
    </li>
    <li><a href="#">9</a>
      <p>Styling Components - Typed CSS With Stylable</p>
    </li>
    <li><a href="#">10</a>
      <p>Christmas Gifts for Your Future Self: Testing the Web Platform</p>
    </li>
    <li><a href="#">11</a>
      <p>Teach the CLI to Talk Back</p>
    </li>
    <li><a href="#">12</a>
      <p>Design Systems and CSS Grid</p>
    </li>
    <li><a href="#">13</a>
      <p>Getting Hardboiled with CSS Custom Properties</p>
    </li>
    <li><a href="#">14</a>
      <p>Why Design Systems Fail</p>
    </li>
    <li><a href="#">15</a>
      <p>Accessibility Through Semantic HTML</p>
    </li>
    <li><a href="#">16</a>
      <p>Care and Feeding of Burnout</p>
    </li>
    <li><a href="#">17</a>
      <p>Feeding the Audio Graph</p>
    </li>
    <li><a href="#">18</a>
      <p>Designing for Mobile Performance</p>
    </li>
    <li><a href="#">19</a>
      <p>Want to Break Out of Comparison Syndrome? Do a Media Detox</p>
    </li>
    <li><a href="data.html">20</a>
      <p>Is Your Website Accidentally Sexist?</p>
    </li>
    <li><a href="#">21</a>
      <p>Knowing the Future - Tips for a Happy Launch Day</p>
    </li>
    <li><a href="#">22</a>
      <p>Design Systems and Hybrids</p>
    </li>
    <li><a href="#">23</a>
      <p>Refactoring Your Way to a Design System</p>
    </li>
    <li><a href="#">24</a>
      <p>All That Glisters</p>
    </li>
  </ul>
</div>

Answer 1

Дайте вашим p-тегам абсолютную позицию, выровненную по левому краю, со 100% шириной и выравниванием текста по центру.

Примечание. Возможно, вам придется присвоить родительскому тегу div значение position:relative, если вы хотите, чтобы теги p центрировались относительно контейнера, а не страницы.

li p{
   display: none;
   position:absolute;
   left: 0;
   width: 100%;
   text-align: center;
}

.flex{
   display:flex;
   list-style:none;
   padding: 0;
}

li{
   background: dodgerblue;
   margin-right: 5px;
   border-radius: 50%;
}

li p{
   display: none;
   position:absolute;
   left: 0;
   width: 100%;
   text-align: center;
}

li a{
   text-decoration:none;
   color: #fff;
   display:block;
   width: 30px;
   height: 30px;
      display:flex;
   align-items: center;
   justify-content:center;
}

li a:hover ~ p{
   display: block;
}

<ul class="flex">
  <li><a href="#">1</a><p>Cascading Web Design with Feature Queries</p></li>
  <li><a href="#">2</a><p>Lint the Web Forward With Sonarwhal</p></li>
  <li><a href="#">3</a><p>Web Content Accessibility Guidelines—for People Who Haven't Read Them</p></li>
  <li><a href="#">4</a><p>Jobs-to-Be-Done in Your UX Toolbox</p></li>
  <li><a href="#">5</a><p>Levelling Up for Junior Developers</p></li>
  <li><a href="#">6</a><p>Designing a Remote Project</p></li>
  <li><a href="#">7</a><p>Automating Your Accessibility Tests</p></li>
  <li><a href="#">8</a><p>Stop Leaving Animation to the Last Minute</p></li>
  <li><a href="#">9</a><p>Styling Components - Typed CSS With Stylable</p></li>
  <li><a href="#">10</a><p>Christmas Gifts for Your Future Self: Testing the Web Platform</p></li>
  <li><a href="#">11</a><p>Teach the CLI to Talk Back</p></li>
  <li><a href="#">12</a><p>Design Systems and CSS Grid</p></li>
  <li><a href="#">13</a><p>Getting Hardboiled with CSS Custom Properties</p></li>
  <li><a href="#">14</a><p>Why Design Systems Fail</p></li>
  <li><a href="#">15</a><p>Accessibility Through Semantic HTML</p></li>
  <li><a href="#">16</a><p>Care and Feeding of Burnout</p></li>
  <li><a href="#">17</a><p>Feeding the Audio Graph</p></li>
  <li><a href="#">18</a><p>Designing for Mobile Performance</p></li>
  <li><a href="#">19</a><p>Want to Break Out of Comparison Syndrome? Do a Media Detox</p></li>
  <li><a href="data.html">20</a><p>Is Your Website Accidentally Sexist?</p></li>
  <li><a href="#">21</a><p>Knowing the Future - Tips for a Happy Launch Day</p></li>
  <li><a href="#">22</a><p>Design Systems and Hybrids</p></li>
  <li><a href="#">23</a><p>Refactoring Your Way to a Design System</p></li>
  <li><a href="#">24</a><p>All That Glisters</p></li>
</ul>