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

时间:2015-11-05 10:19:46

标签: html css css3 flexbox css-tables

我有这段代码:

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

4 个答案:

答案 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>

DEMO HERE

答案 3 :(得分:0)

为什么不直接使用行高?

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

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

CSS:

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