CSS: Fitting div height into another inclusive padding - css

Question

As seen in the picture, I practically have a div of defined width 100% but no defined height, but rather the height is defined to match the contents with a percentage of top and bottom padding.
The problem is I want to have some kind of navigation buttons on the right side, and they must be aligned perfectly in the vertical middle.
I have included a Fiddle of what I did, but it doesn't show in the middle in all cases.
What can be an optimal solution.
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;
}
http://jsfiddle.net/HJLEe/2/

Answer 1

take a look at this fiddle The idea is vertically align list
position: absolute;
top: 50%;
margin-top: - half-height;

Answer 2

Not the best solution, but it works.
HTML:
<div class="title">Title
<ul id="bullets">
<li></li>
<li></li>
<ul>
</div>
CSS:
.title {
width:100%;
background:#365F95;
background-size; cover;
font-size:130%;
color:#FFF;
padding:5% 0;
text-align:center;
}
.title ul {
position:relative;
float: right;
margin-top: 0px;
}
.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;
}
JSFIDDLE

Answer 3

try use position relative in your ul class
.title ul {
position: relative;
}
jsfiddle.net

Answer 4

try this css
.title ul {
position: absolute;
right: 0;
top: 0%;
padding-top: inherit;
margin: 0;
}

Answer 5

Try setting a margin in percentage. Like this...
.title ul {
position:absolute;
right: 0;
top: 0%;
vertical-align :middle;
margin-top : 5%;
}

Answer 6

Another option using vertical-align:middle and the helper pseudo element to hold the height.
Demo: http://jsfiddle.net/HJLEe/13/
Essential additions to the code:
.title ul {
position:absolute;
right: 0;
top: 0;
bottom: 0;
}
/* style of LIs not changed */
.title ul:before {
content: '';
display: inline-block;
height: 100%; /* makes the effective line height equal to the height of the container */
vertical-align: middle; /* align the vertical center with the vertical middle of the text, including our bullets */
}