Css 如何将元素垂直居中对齐？

我相信这个问题已经被问过很多次了。我相信我知道正确的方法，但它不适合我

我有一个父元素，它是一个表，然后是一个子元素，它是一个标记为垂直居中对齐的表单元。然后在子元素中，我有一个跨度-跨度应该垂直居中

.breadcrumb{display:none；}
.bulletwrapper{宽度：840px；边距：0自动；清除：两个；溢出：自动；显示：表格；}
#bullet1{浮动：左；背景：url(http://www.raceramps.com/images/trailerhaulload/BULLET1-heavy-boards.jpg)左不重复；}
#bullet2{float:右；背景：url(http://www.raceramps.com/images/trailerhaulload/BULLET2-lightweight.jpg)左不重复；}
.bulletwrapper2{宽度：410px；左侧无重复；高度：94px；显示：表格单元格；垂直对齐：中间；}
.bulletwrapper2 span{width:285px；float:right；边框：#999细实线；边框半径：5px；填充：10px；}
再也没有重木板可以折断，像射弹一样射出，或者在拖来拖去的时候折断你的背了！
重量轻-最大的坡道重量小于20磅！
​

---

我在上看到了相同的概念，但出于某种原因，它对我不起作用？

这使得2个div堆栈位于中间

.breadcrumb{display:none;}
.bulletwrapper{width:840px; margin:0 auto; clear:both; overflow:auto; display:table;}
#bullet1{  background:url(http://www.raceramps.com/images/trailerhaulload/BULLET1-heavy-  boards.jpg) left no-repeat;}
#bullet2{background:url(http://www.raceramps.com/images/trailerhaulload/BULLET2-lightweight.jpg) left no-repeat;}
.bulletwrapper2{width:410px; height:94px; margin:0 auto; clear:both;  }
.bulletwrapper2 span{width:285px; float:right; border:#999 thin solid; border-radius:5px; padding:10px;clear:both;}

---

从你的

#bullet2

和

#bullet1

DIV中删除

float

。

你应该格式化你的css并把它放在那把小提琴上的css窗格中，这很难阅读。你的示例中有所有的DIV，没有表格。它们是按表格格式设置的DIV…显然我不知道你在这里做的一切，但是，看起来您应该使用

ul

和

li

而不是

div

s，以确保语义正确，并确保在所有浏览器/平台上都能很好地处理内容。不会帮助你垂直对齐内容，但话说回来，你不必费心先用谷歌搜索它（有一百万个教程）。我不认为这是对立的，但如果没有谷歌，我不会尝试我现在使用的方法。批评时要有建设性。

.breadcrumb{display:none;}
.bulletwrapper{width:840px; margin:0 auto; clear:both; overflow:auto; display:table;}
#bullet1{  background:url(http://www.raceramps.com/images/trailerhaulload/BULLET1-heavy-  boards.jpg) left no-repeat;}
#bullet2{background:url(http://www.raceramps.com/images/trailerhaulload/BULLET2-lightweight.jpg) left no-repeat;}
.bulletwrapper2{width:410px; height:94px; margin:0 auto; clear:both;  }
.bulletwrapper2 span{width:285px; float:right; border:#999 thin solid; border-radius:5px; padding:10px;clear:both;}