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

嗯......我们会去找零件：

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

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

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

E.g：

<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元素的高度，您会看到图像始终位于中心位置。

干杯，莱昂纳多

Answer 2

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

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

Answer 3

如果您不使用保证金，请尝试使用line-height上的li和.frdImgProfile

将#frdImgProfile更改为.frdImgProfile并将您的html更改id=frdImgProfile更改为class=frdImgProfile，
删除margin-top

.frdImgProfile

将line-height: 120px;添加到#contactList > li
将display: inline-block; vertical-align: middle;line-height: normal;添加到.frdImgProfile

#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;
    line-height: 120px;
}

.frdImgProfile {
    width: 50px;
    height: 50px;
    border: 1px solid #aaa;
    background: #ffe;
    margin-left:4px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
   display: inline-block;
   vertical-align: middle;
   line-height: normal;
}

的 demo on cssdeck

希望这个帮助

在ul列表中对齐中间的div

3 个答案: