Css 在UL列表中间Li中对齐div

我在时间上遇到了一个小问题，无法在

中对齐我的div。我想垂直对齐我的div（里面有一个图片），不管我的代码高度> LI> <代码>，它总是在中间。不适用于页边距顶部百分比（%）。已使用显示表，但不适用于我的案例

下面是我想留下的照片：

当my

图像不在<代码> > LI> < /代码> ^ 如果有人能帮我，这是我的提琴。请记住，不使用边距：）。在我的情况下，我暂时使用的文件小提琴

#frdImgProfile{
宽度：50px；
高度：50px；
边框：1px实心#aaa；
背景：#ffe；
位置：绝对位置；
利润上限：3倍；
左边距：4倍；
-webkit边界半径：6px；
-moz边界半径：6px；
}

---

谢谢大家!

可以添加。。添加完整的类++

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

---

如果不使用边距，请在

li

和

.frdImgProfile

将

#frdImgProfile

更改为

.frdImgProfile

，并在html中将

id=frdImgProfile

更改为

class=frdImgProfile

删除

.frdImgProfile

添加

行高：120px至
#联系人列表>li

添加

显示：内联块；垂直对齐：中间对齐；线高：正常至
.frdImgProfile

---

---

希望这有助于。。。我们将选择以下部件：

第一：你不必滥用id属性

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

第三：我看到你有一个名为：div#avatarUser的div。我猜你是为了设置特殊风格而创作的。你不需要这么做。使用parent:first child或parent:nth child（1），可以为第一个元素设置特定样式：

例如：

---

好吧，现在我们深入研究你的问题

我对您的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>

为了使图像居中，我使用了flexiblebox模型或Flexbox

但是我想为什么要复杂化？如果您知道图像容器的高度，请使用线条高度

在开发区存在一种称为KIS的原则。这意味着：

保持简单

如果你有解决方案（和一个好的解决方案），就使用它！这将避免头痛

这是一个例子

尝试在演示中更改

li

元素的高度，您将看到图像始终居中

干杯，

---

莱昂纳多

你的

有固定的高度和宽度

50px

。这个css#contactList>li{bla..bla..bla..120px；}如果你的

s有固定的宽度和高度

50px

，你可以试试这个：注意我把

id

改为

class

，因为你不应该有多个相同id的元素。是的，id是固定的，因为我使用了ctrl c，ctrl v。。你说利润率最高是什么意思：-25px？是你变了吗？或者还有别的事吗？如果不使用边距，就没有其他方法了：）-谢谢您的时间…

top:50%；页边距顶部：-25px

。这是基于这样一个事实：

高度：50px

是固定的！我的css使用了#id，因为这些样式将只使用一个！对于具有相同id的对象，它们被用作重复项（ctrl-c、ctrl-v），如上所述。我最大的问题是div“

”中的相同对齐。谢谢你的时间。代码实际上有点混乱，我会在一切结束时整理它。但是谢谢你的提示！哦，求你了！没什么。我很高兴帮助你。男人无意中虐待。。。在（.ContactList>li:n子项（1）{….}之后有一张图片。。。需要插入css我必须将此图像的边缘磨圆，我尝试执行以下操作：。联系人列表>li:n个孩子（1）：在img{}之后。。。显然，它没有起作用。跟随小提琴更新：。你能告诉我怎么做吗？再次感谢@Igao ASP.NET的问题！但我不在电脑里，我在手机里。。。但是我想你应该把这些规则放在{border radius:value；}之后：contactList>li:nth child（1）。如果你等一会儿，我会去我的电脑，我很乐意帮助你。回答得也很好。我们达成了同样的目标！谢谢你抽出时间！拥抱

<ul>
 <li></li> <!-- I want to set specific styles for this element. The first element -->
 <li></li>
 <li></li>
</ul>

ul > li:nth-child(1) { /* Your CSS 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>

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