Question

我有以下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不在李之外。你能告诉我出了什么问题吗？

谢谢！

Answer 1

只需将'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>

Answer 2

通过div的{{1}}类div只有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;
}

将div放在li里面的标签上

2 个答案: