我有这段代码:
<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?
答案 0 :(得分: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;
答案 1 :(得分:0)
有一种方法可以在没有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
定位。最大的项目(伪元素)将强制跨度垂直对齐,以自身为中心。
答案 2 :(得分:0)
你可以尝试这个:
<div style="display: table; height: 300px; overflow: hidden;display: table-cell; vertical-align: middle;">abc</div>
答案 3 :(得分:0)
为什么不直接使用行高?
小提琴:http://jsfiddle.net/SVJaK/2757/
<div class="test">ABC</div>
CSS:
.test {
border: 1px solid green;
width: 200px;
line-height: 200px;
}