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

http://tinkerbin.com/ojXJuQfl 为什么这个文本块不能垂直居中，只有一行？

我设法使用来自其他用户的指令和居中文本垂直，但它不允许我垂直居中整个事情。我想如果我把文本放在它自己的div中，它会这样做，但它没有。我怎样才能在箭头旁边放置一段？

垂直对齐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>

来源

2012-08-03 king

垂直居中的东西可能相当困难。我有一个替代解决方案。这是一个有点冒失的解决方案，但据我所知这是最好的和最有效的。

您需要将#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

我希望是很清晰。如果您还有其他问题或感觉您的问题没有真正解答，请不要犹豫，问问。

来源

2012-08-03 17:40:35 bakkerjoeri

老兄，是的，你是男人，非常感谢你。 – king 2012-08-03 18:05:13

我仍然一直使用此作为参考..再次感谢这个答案大声笑..一年后...... – king 2013-05-10 21:42:02

很高兴我可以帮助:)。 – bakkerjoeri 2013-05-14 09:30:43

是否有一个原因的箭头必须在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 
}

注 - 居中的文字，我只是做了填充相同的顶部和底部。其实你应该将填充物涂在容器上。这也可以让文本框扩展，尽管你可能不希望这种行为。

来源

2012-08-03 17:39:35 radixhound

here is my version我上的bulletwrap文本div和display: table使用display: table-cell and vertical-align: middle; height: whatever;div

来源

2012-08-03 17:39:57 dezman

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

来源

2012-08-03 17:40:12 Lowkase

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

回答

相关问题