Give your p tags a position of absolute, aligned to the left, with a 100% width and a text-align of center.
Note: you may have to give a parent div a position:relative if you want the p tags to be centered relative to the container, not the page.
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>
I have this list at the bottom of the page, and when I hover over each number, a sentence shows up, however, I want the paragraph with the sentence to show centered in the middle of the page, so pretty much all in the same position, how can i do that?
Images attached to help 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>
thank you! worked perfectly by adding the first bit of code, the .dotMenu div itself was already with position:relative, so no need to add
