0

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>
4

4 回答 4

2

这是我在display: table-cell and vertical-align: middle; height: whatever;文本div和display: table子弹包装上使用的版本div

于 2012-08-03T17:39:57.710 回答
2

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

你需要让你的#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

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

于 2012-08-03T17:40:35.143 回答
0

箭头必须在 a 中是否有原因div？通常，垂直对齐图像的最简单方法是将其用作背景。

<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
 }

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

于 2012-08-03T17:39:35.957 回答
0

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

于 2012-08-03T17:40:12.617 回答