0

我有以下html代码：

<ul class="ul">
   <li class="li">
        <a href="#;" class="a">Link</a>
        <div class="div"> <img src="photo.jpg" /> </div>
    </li>
</ul>

以及以下 CSS：

ul.ul {
   background-image: url(text.png);
   background-repeat: no-repeat;
   background-position: 100% 0;  
   >li.li{
    height: 80px;
    min-width: 68px;

    background-repeat: no-repeat;
    background-position: 50% (72px-32px-12px);
    color: #fff;

    >a {
        line-height:8px;
        margin-top: 12px;
        color: #fff;
        font-weight: bold;
        padding-bottom: 10px;
        height: (80/2+14);
    }

    >div.div{
        text-align: center;
    } 

}

我的 div 在元素“a”下，我想把它放在元素 a 上。在萤火虫中，似乎 div 在 li 之外。你能告诉我有什么问题吗？

谢谢！

4

2 回答 2

0

只需将 'a' 和 div 放在单独的 li 中：

<ul class="ul">
    <li class="li">
        <div class="div"> <img src="photo.jpg" /> </div>
    </li>   
    <li class="li">
        <a href="#;" class="a">Link</a>
    </li>
</ul>
于 2015-07-30T14:24:38.623 回答
0

我不知道你想通过div一个类名divwith only来完成什么text-align: center;。如果它使你想要的文本居中，你可以ul用div. 或者更好的解决方案；

a {
    line-height:8px;
    margin-top: 12px;
    color: #fff;
    font-weight: bold;
    padding-bottom: 10px;
    height: 5px; /* Idk why you had that the way it was... thats not css */
    text-align: center;
}

既然我们知道您想要什么，我们实际上可以帮助您。要使图像居中，请执行此操作。

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
于 2015-07-30T14:28:27.017 回答