DIV中的垂直居中文本

Question

我有这个HTML / CSS片段：

 .matrix-right-letter-container { font-size: 48px; } .matrix-place { display: inline-block; vertical-align: top; margin: 10px; } .matrix-input { height: 50px; width: 50px; margin: 3px; vertical-align: bottom; } 

 <div class="matrix-line-container"> <div id="matrix-c-place" class="matrix-place bracketed"> CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br> </div> <div id="matrix-a-place" class="matrix-place bracketed"> CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br> </div> <span class="matrix-right-letter-container">A</span> </div> 

我需要在matrix-line-container垂直居中字母A. 但是将vertical-align: middle添加到.matrix-right-letter-container也无济于事。 我该怎么做？

Answer 1

至少有两种方法可以做到这一点。 当然是CSS方式还是使用一些JS。

选项1：CSS

现在你可以给你的span文本的父容器一个display:table属性和你要垂直对齐的元素display:table-cell属性并将它对齐top，middle bottom等。

这里的代码片段：

 .matrix-line-container { background: grey; display: table; /* See what I did here? */ } .matrix-right-letter-container { font-size: 48px; background: cyan; display: table-cell; /* And also here*/ vertical-align: middle; /* And here*/ } .matrix-place { display: inline-block; vertical-align: top; margin: 10px; background: pink; } .matrix-input { height: 50px; width: 50px; margin: 3px; vertical-align: bottom; } 

 <div class="matrix-line-container"> <div id="matrix-c-place" class="matrix-place bracketed">CONTENT <br/>CONTENT <br/>CONTENT <br/>CONTENT <br/>CONTENT <br/>CONTENT <br/>CONTENT <br/> </div> <div id="matrix-a-place" class="matrix-place bracketed">CONTENT <br/>CONTENT <br/>CONTENT <br/>CONTENT <br/>CONTENT <br/>CONTENT <br/>CONTENT <br/> </div> <span class="matrix-right-letter-container">A</span> </div> 

现在是第二种选择，

选项2：一些JS （不是真的推荐，但如果你想得到它，那我猜）

在这个选项中你只想找到父div元素高度的高度（我已经使用过jQuery，因为我喜欢它，就是这样，让我的输入更容易。现在你有了height()或innerHeight()二级选项innerHeight()或outerHeight() 。根据用户的具体情况， outerHeight()使用它。 一旦你拥有父div元素的高度，那么只需将该高度应用于span元素作为line-height属性和Voila！ 你有它！

现在是第二个时髦选项的代码片段，

 // Obviously I added some script - What else did you think I was gonna do?!! var divht = $('.matrix-line-container').innerHeight() + 'px'; /* DO NOT forget to add that little 'px' to the end or else it wont work! */ $('.matrix-right-letter-container').css("line-height", divht); 

 .matrix-line-container { background: grey; } .matrix-right-letter-container { font-size: 48px; background: cyan; } .matrix-place { display: inline-block; vertical-align: top; margin: 10px; background: pink; } .matrix-input { height: 50px; width: 50px; margin: 3px; vertical-align: bottom; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="matrix-line-container"> <div id="matrix-c-place" class="matrix-place bracketed">CONTENT <br/>CONTENT <br/>CONTENT <br/>CONTENT <br/>CONTENT <br/>CONTENT <br/>CONTENT <br/> </div> <div id="matrix-a-place" class="matrix-place bracketed">CONTENT <br/>CONTENT <br/>CONTENT <br/>CONTENT <br/>CONTENT <br/>CONTENT <br/>CONTENT <br/> </div> <span class="matrix-right-letter-container">A</span> </div> 

希望这给了你一些思考的东西;）

希望这有助于和快乐编码

Answer 2

您应该vertical-align: middle所有内联块，以便相对于彼此垂直对齐它们

 .matrix-right-letter-container { font-size: 48px; } .matrix-place { display: inline-block; vertical-align: middle; margin: 10px; } .matrix-input { height: 50px; width: 50px; margin: 3px; vertical-align: bottom; } 

 <div class="matrix-line-container"> <div id="matrix-c-place" class="matrix-place bracketed"> CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br> </div> <div id="matrix-a-place" class="matrix-place bracketed"> CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br> </div> <span class="matrix-right-letter-container">A</span> </div>