Align div in the middle li on ul list

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