在 ul 列表的中间 li 对齐 div

Question

我在及时将我的 div 对齐到 <li> 中时遇到了一个小问题。我想垂直对齐我的 div（里面有一张图片），无论我的<li> 的高度如何，它总是在中间。不使用利润率最高百分比 (%)。已经使用了显示表，但不适用于我的情况。

这是我想留下的照片：

我的<li>的高度如何增加。

图像不在<li> 的中间。 ^

如果有人可以帮助我，这是我的文件小提琴。记住不要使用边距:)。就我而言，我暂时使用文件小提琴。

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;
}

谢谢！

Answer 1

可以添加..添加您完整的课程。 ++

#contactList > li {
    position:relative;
}
#frdImgProfile {
    width: 50px;
    height: 50px;
    position:absolute;
    margin-top:-25px;
    top:50%;
}

Answer 2

嗯...我们会去零件：

首先：您不必滥用 id 属性。

第二：在您的 CSS 代码中，您有很多引用相同 id 的规则。这不是一个好习惯。它假设 id 是唯一的。

第三：我看到你有一个名为：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;
}

为了使图像居中，我使用了弹性盒模型或弹性盒。

但我认为... 为什么要复杂化？如果您知道图像容器的高度，请使用 line-height

在开发区存在一个叫做 KIS 的原则。意思是：

保持简单。

如果您有解决方案（和一个好的解决方案），请使用它！这样可以避免头痛。

这是DEMO。

尝试更改演示中li 元素的高度，您将看到图像始终居中。

干杯， 莱昂纳多