Looking at the image, there seems to be a div with a width of 100% and no defined height. Instead, the height adjusts based on the content, with top and bottom padding in percentages. The issue arises when trying to place navigation buttons on the right side that need to be perfectly aligned vertically in the middle. I've shared a Fiddle showcasing my attempt, but the alignment isn't consistent across all scenarios. What would be the best approach to achieve optimal alignment?
HTML
<div class="title">Title
<ul id="bullets">
<li></li>
<li></li>
<ul>
</div>
CSS
.title {
width:100%;
background:#365F95;
background-size: contain;
font-size:130%;
color:#FFF;
padding:5% 0;
text-align:center;
position:relative;
}
.title ul {
position:absolute;
right: 0;
top: 0%;
}
.title ul li {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 10px;
background: #FFF;
box-shadow: inset 0 1px 3px black, 0 0 1px 1px #202020;
margin: 0 2px;
}