css - 为什么这个文本 block 不垂直居中，只有一行？

Question

http://tinkerbin.com/ojXJuQfl

我设法使用了另一个用户的说明并使文本垂直居中，但它不允许我将整个内容垂直居中。我想如果我把文本放在它自己的 div 中，它会这样做，但它没有。我怎样才能在箭头旁边居中一个 PARAGRAPH？

垂直对齐 CSS 非常困惑...

CSS

#arrow {
       width:33px;
       height:25px;
       background-image:url('http://i.imgur.com/26tbf.png');
       margin-left:55px;
       background-position:0 50%;
       float:left;
       height:100%;
       background-repeat:no-repeat;
 } 

#bulletwrap {
       border:1px solid black;
       width:325px;
       height:75px;
 } 

#text {
      background-position:0 50%;
      line-height:75px;    
 } 

HTML

<div id="bulletwrap"><div id="arrow"></div><div id="text">This is some longer text that needs to be centered next to the arrow grouped together</div></div>

Answer 1

垂直居中的东西是相当困难的。我对您的解决方案有一个替代建议。这是一个有点老套的解决方案，但据我所知，它是最好、最有效的。

您需要让您的#bulletwrap div(或任何其他容器类型元素)表现为表格，而您的#text(段落或div，无关紧要)表现为表格单元格。这将允许您对 #text 元素使用 vertical-align: middle;，使其垂直居中。

这是重要的CSS:

#bulletwrap {
  border:1px solid black;
  width:325px;
  height:75px;
  display: table; /*set your container to behave as table*/
} 

#text {
  display: table-cell; /*set your text to behave as table cell*/
  vertical-align: middle; /*... and vertically align it*/
}

这是在行动http://tinkerbin.com/jSocLUGX

我希望这已经足够清楚了。如果您有任何其他问题或觉得您的问题没有真正得到解答，请随时提问。