2

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

这是我想留下的图片：
一个
b

我的身高是怎么增加的<li>。
C

图片不在中间<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;
}

谢谢！

4

3 回答 3

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 的原则。它的意思是：

把事情简单化。

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

这是一个演示。

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

干杯，莱昂纳多

于 2013-06-21T04:42:27.323 回答
0

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

#contactList > li {
    position:relative;
}
#frdImgProfile {
    width: 50px;
    height: 50px;
    position:absolute;
    margin-top:-25px;
    top:50%;
}
于 2013-06-21T03:57:20.773 回答
0

如果您不使用边距，请尝试使用line-heightonli和.frdImgProfile

  1. 更改#frdImgProfile为.frdImgProfile并在您的 html 更改id=frdImgProfile为class=frdImgProfile,
  2. 删除margin-top_.frdImgProfile
  3. 添加line-height: 120px;到#contactList > li
  4. 添加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

希望这有帮助

于 2013-06-21T04:07:31.177 回答