Html ulli形状和文本

我的形状列表有一些问题-也许我处理得不对？我需要一些关于我希望达到的目标的建议

CSS:

HTML:

---

正如您从我的代码中看到的，并将其正确地排列起来。我想放置一个图标（这是一个跨度）坐在每个形状的中间，还有一个词在每一个下面。然而，当我加入像这样的元素时，它会完全抛出。也许我的布局不正确？

只要我不知道你想放入的图像的大小。我只能说： 您应该将css更改为：

#circle { 
   height: auto;
    width: auto;
    border-radius: 50%;
   background: #3B5163; 
   -moz-border-radius: 50%; 
   -webkit-border-radius: 50%; 
}

#tablet{
    width: auto;
    height: auto; 
    background: #3B5163; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
}

另外，最好使用display:block，然后使用float:left。如果我错了，请纠正我，这样css将对象视为块，使用“float:”可以告诉这些框向左或向右堆叠。（如果不定义float，默认情况下，它们将堆叠在彼此下面）

---

除此之外，您还可以尝试绝对定位方法。

嘿，嗨，我想您看起来是这样的：-

添加此css

#circle { 
   height: 120px;
    width: 120px;
    border-radius: 60px;
   background: #3B5163; 
   -moz-border-radius: 60px; 
   -webkit-border-radius: 60px; 
}
#circle span {
    clear: both;
    display: block;
    text-align: center;
    vertical-align: middle;
}
#tablet{
    width: 295px;
    height: 354px; 
    background: #3B5163; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
}
.text {

    display: block;
    text-align: center;

}

---

更新的演示：-

基本上就在那里，我只需要它说灯泡在那个圆圈下面的位置？哦，那么你需要蓝色圆圈下面的灯泡文本，对吗？

#circle { 
   height: auto;
    width: auto;
    border-radius: 50%;
   background: #3B5163; 
   -moz-border-radius: 50%; 
   -webkit-border-radius: 50%; 
}

#tablet{
    width: auto;
    height: auto; 
    background: #3B5163; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
}

#circle { 
   height: 120px;
    width: 120px;
    border-radius: 60px;
   background: #3B5163; 
   -moz-border-radius: 60px; 
   -webkit-border-radius: 60px; 
}
#circle span {
    clear: both;
    display: block;
    text-align: center;
    vertical-align: middle;
}
#tablet{
    width: 295px;
    height: 354px; 
    background: #3B5163; 
    border-radius: 5px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px;
}
.text {

    display: block;
    text-align: center;

}