css - 在 ul 列表的中间 li 中对齐 div

Question

我在将我的 div 对齐到 <li> 时遇到了一个小问题。 .我想垂直对齐我的 div(里面有一张图片)，无论我的 <li> 的高度如何, 它总是在中间。 NO USE WITH MARGIN-TOP PERCENTAGE (%).已经使用了显示表，但不适用于我的情况。

这是我想留下来的照片:

当我的高度如何增加<li> .

图片不在<li>中间. ^

如果有人能帮助我，这是我的文件 fiddle 。记住不要使用边距 :)。就我而言，我暂时使用文件 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;
}

谢谢!

Answer 1

好吧……我们去寻找零件:

首先:您不必滥用 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;
}

为了使图像居中，我使用了 Flexible Box Model 或 Flexbox。

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

在开发领域存在一个称为 KIS 的原则。这意味着:

保持简单。

如果您有解决方案(并且是一个好的解决方案)，请使用它!这将避免头痛。

这是一个 DEMO .

尝试更改演示中 li 元素的高度，您会发现图像始终居中。

干杯， 莱昂纳多