Question

我有这段代码：

<div style="font-size: 1.5rem; width: 20%;vertical-align: middle;" >ABC</div>

当我看到它显示的页面时。我添加了x来显示DIV的边界：

xxxxxxxxxxxxxxx
x             x
x ABC         x
x             x
x             x
xxxxxxxxxxxxxxx

似乎垂直对齐没有做任何事情。

我可以做到这样，ABC上方和下方的空间是相同的。我看到了CSS表和Flex。有没有办法可以用标准CSS做到这一点，还是我需要使用CSS表格或Flex？

Answer 1

用于 display 属性，就像这样

>>> class newObj(object):
...    def  __init__(self,val):
...         self.val = val
...    def __add__(self,item):
...        return '{}_____{}'.format(self.val,item)
... 
>>> 
>>> start=newObj('new_obj')
>>> 
>>> start
<__main__.newObj object at 0x7f75f9241c50>
>>> 
>>> start + 5
'new_obj_____5'
>>> 
>>> 
>>> sum(['1','2','3'],start)
'new_obj_____123'

-

display:table-cell;

Answer 2

有一种方法可以在没有display: table;和display: flex的情况下解决此问题。这有点棘手，但工作正常。

首先，您的剪辑不会像这样工作，因为vertical-align属性仅适用于内联和表格单元格框。默认情况下，<div>为display: block，因此超出范围。

那么，我们能做什么？这样：

.vertical-align-content
{
  height: 150px;
  background-color: silver;
}

.vertical-align-content > span,
.vertical-align-content::before
{
  display: inline-block;
  vertical-align: middle;
}

.vertical-align-content::before
{
  height: inherit;
  content: "";
}

<div class="vertical-align-content">
  <span>Hello</span>
</div>

此解决方案是将.vertical-align-content的伪元素insde放置为父容器继承的高度。伪元素和<span>都设置为display: inline-block，因此可以使用vertical-align定位。最大的项目（伪元素）将强制跨度垂直对齐，以自身为中心。

Answer 3

你可以尝试这个：

<div style="display: table; height: 300px; overflow: hidden;display: table-cell; vertical-align: middle;">abc</div>

DEMO HERE

Answer 4

为什么不直接使用行高？

小提琴：http://jsfiddle.net/SVJaK/2757/

<div class="test">ABC</div>

CSS：

.test {
   border: 1px solid green;
   width: 200px;
   line-height: 200px;
}

如何让我的文本在DIV中垂直对齐？

4 个答案: