Question

我设法使用来自其他用户的指令并垂直居中文本，但它不允许我垂直居中整个事物。我想如果我把文本放在它自己的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

here is my version我在display: table-cell and vertical-align: middle; height: whatever;上使用了div，在{@ 1}}上使用了display: table

Answer 2

垂直居中可能相当困难。我有一个替代方案来解决您的问题。这是一个hacky解决方案，但据我所知它是最好和最有效的。

您需要将#bulletwrap div（或任何其他容器类型元素）表现为表格，并将#text（段落或div，它并不重要）作为表格单元格。这将允许您使用vertical-align: middle;作为#text元素，使其垂直居中。

这是重要的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

我希望这很清楚。如果您有任何其他问题或者您的问题没有得到真正解答，请随时提出。

Answer 3

箭头必须在div中吗？通常，垂直对齐图像的最简单方法是use it as a background。

<div id="bulletwrap">
  <div id="text">
    This is some longer text that needs to be centered next to the arrow grouped together and what happens if there is even more text then that is not going to work out so well
  </div>
</div>

和CSS

#bulletwrap {
       border:1px solid black;
       width:325px;
       background:url('http://i.imgur.com/26tbf.png') no-repeat left center;
       padding: 10px 0 10px 35px
 }

注意 - 为了使文本居中，我只是为顶部和底部制作了相同的填充。实际上你应该将填充物应用到容器中。这也允许框随文本扩展，但您可能不希望这种行为。

Answer 4

行高：960x75像素;是罪魁祸首。 line-height将应用于包装文本中的每一行，而不是整个文本“块”。可能最好使用radixhound的解决方案或边距/填充方法。

为什么这个文本块不是垂直居中，只是一行？

4 个答案: