Align div in the middle li on ul list - css

Question

I am facing a small problem in time to align my divs inside a <li>. I would like to vertically align my div (which has a picture inside), in a way that no matter the height of my <li>, it will always be in the middle. NO USE WITH MARGIN-TOP PERCENTAGE (%). Already used the display table but did not work for my case.
Here the picture of how I would like to stay:
How is increased when the height of my <li>.
The image is not in the middle of <li>. ^
If anyone can help me, this here my file fiddle. Remember without using margin :). In my case I am temporarily using the file fiddle.
http://jsfiddle.net/Igaojsfiddle/T6KrE/37/
#frdImgProfile {
width: 50px;
height: 50px;
border: 1px solid #aaa;
background: #ffe;
position:absolute;
margin-top:3px;
margin-left:4px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
}
Thank you!

Answer 1

Well... We'll go for parts:
First: You don't have to abuse with the id attributes.
Second: In your CSS code, you have a lot of rules that reference to same id. This is not a good practice. It supposed that the id is unique.
Third: I've seen that you have a div called: div#avatarUser. I guess that you created this for setting special style. Well you don't need to do this. With parent:first-child or parent:nth-child(1) you can set specific styles for the first element:
E.g.:
<ul>
<li></li> <!-- I want to set specific styles for this element. The first element -->
<li></li>
<li></li>
</ul>
So, for do that just in my CSS file, I'll put:
ul > li:nth-child(1) { /* Your CSS code */ }
Well, now we deep in your problem.
I changed a little your HTML code, because I think it's more organized and clean code:
<div class="frdList">
<ul class="contactList">
<li>Friends :)</li>
<li class="p-flexbox flex-hsc">
<img src="http://w2.vanillicon.com/2c85954e3b080d9926c53b530ca40317_50.png" />
</li>
<li class="p-flexbox flex-hsc">
<img src="http://w6.vanillicon.com/6cd18e7a56ebd6fb1f3f607823b7d5fe_50.png" />
</li>
<li class="p-flexbox flex-hsc">
<img src="http://wc.vanillicon.com/cd7c7d1f9a0c56ff3b8296527a98564f_50.png" />
</li>
<li class="p-flexbox flex-hsc">
<img src="http://vanillicon.com/0fff488a9952086c6785f260e2c127ad_50.png" />
</li>
</ul>
</div>
And also changed the CSS file:
/* Reset CSS */
body, div {
margin: 0;
padding: 0;
}
li { list-style: none; }
/* #font-faces imports */
#font-face {
font-family:'Amatic SC';
font-style: normal;
font-weight: 400;
src: local('Amatic SC Regular'), local('AmaticSC-Regular'), url(http://themes.googleusercontent.com/static/fonts/amaticsc/v3/DPPfSFKxRTXvae2bKDzp5D8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
/* Basic styles */
.frdList {
height:500px;
width:500px;
}
.contactList > li:nth-child(1) {
font-weight: bold;
font-family: 'Amatic SC', cursive;
font-size: 45px;
text-align: center;
color: #fff;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
background-image: -webkit-linear-gradient(#2da1ec, #0191d9);
background-image: -moz-linear-gradient(#2da1ec, #0191d9);
background-image: -ms-linear-gradient(#2da1ec, #0191d9);
background-image: linear-gradient(#2da1ec, #0191d9);
border: 1px solid #0082c3;
border-bottom: 1px solid #077be0;
position: relative;
height:55px;
}
.contactList > li:nth-child(1):hover {
background-image: -webkit-linear-gradient(#2eacff, #0191d9);
background-image: -moz-linear-gradient(#2eacff, #0191d9);
background-image: -ms-linear-gradient(#2eacff, #0191d9);
background-image: linear-gradient(#2eacff, #0191d9);
}
.contactList > li:nth-child(1):after {
content: url("http://images1.wikia.nocookie.net/knd/images/3/3a/PR2.gif");
text-align: center;
width: 68px;
height: 65px;
background: #8dfd07;
display: inline-block;
position: absolute;
top: -10px;
left: 15px;
border-radius: 5px;
border: solid 1px #aaa;
}
.contactList > li:nth-child(1):before {
content: "";
position: absolute;
border-radius: 6px;
width: 78px;
height: 75px;
background-color: white;
line-height: 70px;
/* Well see */
text-align: center;
border: solid 1px #aaa;
top: -15px;
left: 10px;
}
.contactList > li {
font-weight: bold;
color: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 2px -2px gray;
background-image: -webkit-linear-gradient(#ededed, #eff0f2);
background-image: -moz-linear-gradient(#ededed, #eff0f2);
background-image: -ms-linear-gradient(#ededed, #eff0f2);
background-image: linear-gradient(#ededed, #eff0f2);
border-left: 10px solid green;
border-right: 1px solid #999999;
height:120px;
}
.p-flexbox {
/* Flexbox: Init setup */
display: -webkit-box;
display: -moz-box;
display: box;
}
.flex-hsc {
/* Flexbox: Principal setup */
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
box-orient: horizontal;
-webkit-box-pack: start;
-moz-box-pack: start;
box-pack: start;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
}
To center the images I used Flexible Box Model or Flexbox.
But I think... Why to complicate? If you know the height of the container of the image, use line-height
In the development area exists a principle called KIS. It means:
Keep It Simple.
If you have the solution (and a good solution), use it! This will avoid headaches.
Here's a DEMO.
Try to change the height of the li elements in the demo and you will see that the images will always be center.
Cheers,
Leonardo

Answer 2

If you won't use margin, try with line-height on li and .frdImgProfile
Change #frdImgProfile to .frdImgProfile and on your html change id=frdImgProfile to class=frdImgProfile,
Remove margin-top on .frdImgProfile
Add line-height: 120px; to #contactList > li
Add display: inline-block; vertical-align: middle;line-height: normal; to .frdImgProfile
#contactList > li {
font-weight: bold;
color: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 2px -2px gray;
background-image: -webkit-linear-gradient(#ededed, #eff0f2);
background-image: -moz-linear-gradient(#ededed, #eff0f2);
background-image: -ms-linear-gradient(#ededed, #eff0f2);
background-image: linear-gradient(#ededed, #eff0f2);
border-left:10px solid green;
border-right:1px solid #999999;
height:120px;
line-height: 120px;
}
.frdImgProfile {
width: 50px;
height: 50px;
border: 1px solid #aaa;
background: #ffe;
margin-left:4px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
display: inline-block;
vertical-align: middle;
line-height: normal;
}
demo on cssdeck
Hope this help

Answer 3

can add .. add you complete classes. ++
#contactList > li {
position:relative;
}
#frdImgProfile {
width: 50px;
height: 50px;
position:absolute;
margin-top:-25px;
top:50%;
}