さて...部品を取りに行きます：
まず: id属性を乱用する必要はありません。
2 番目: CSS コードには、同じ ID を参照する多くのルールがあります。これは良い習慣ではありません。IDは一意であると想定されていました。
3 番目: div#avatarUser という名前の div があることがわかりました。特別なスタイルを設定するためにこれを作成したと思います。まあ、これを行う必要はありません。parent:first-child または parent:nth-child(1) を使用すると、最初の要素に特定のスタイルを設定できます。
例えば：
<ul>
<li></li> <!-- I want to set specific styles for this element. The first element -->
<li></li>
<li></li>
</ul>
したがって、CSS ファイルだけでそれを行うには、次のように記述します。
ul > li:nth-child(1) { /* Your CSS code */ }
さて、今、私たちはあなたの問題を深く掘り下げています。
HTMLコードを少し変更しました。より整理されたクリーンなコードだと思うからです:
<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>
また、CSS ファイルも変更しました。
/* 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;
}
画像を中央に配置するために、Flexbox Model または Flexbox を使用しました。
しかし、私は思う...なぜ複雑にするのですか？画像のコンテナーの高さがわかっている場合は、line-height を使用します
開発領域には、KIS と呼ばれる原則が存在します。その意味は：
複雑にしないでおく。
解決策 (および適切な解決策) がある場合は、それを使用してください。これにより、頭痛が回避されます。
ここにデモがあります。
デモで要素の高さを変更してみるとli、画像が常に中央に表示されることがわかります。
乾杯、レオナルド
