垂直对齐另一个div中两个不同div中的文本[重复]
Posted
技术标签:
【中文标题】垂直对齐另一个div中两个不同div中的文本[重复]【英文标题】:vertical align text in two different div's inside another div [duplicate] 【发布时间】:2018-05-02 05:09:05 【问题描述】:我正在尝试垂直对齐两个 div 中的文本。我已经尝试了许多在这里找到的解决方案,但都没有产生所需的结果。
我已经制作了一个 sjFiddle:
#outer
position: relative;
#inner1
position: absolute;
align-items: center;
top: 10%;
bottom: 10%;
width: 100%;
height: 40%;
#inner2
position: absolute;
align-items: center;
top: 50%;
bottom: 10%;
width: 100%;
height: 40%;
html,
body
height: 100%;
#outer
background-color: purple;
width: 50%;
height: 50%;
#inner1
background-color: yellow;
#inner2
background-color: red;
<div id="outer">
<div id="inner1">
Test text 1
</div>
<div id="inner2">
Test text 1
</div>
</div>
任何人都可以根据我的小提琴中的代码看到我如何做到这一点。 非常感谢您抽出宝贵时间。
【问题讨论】:
jsfiddle.net/6t0pjgwz 【参考方案1】:这与您想要实现的目标相似吗?
#outer
height:100%;
padding:10% 0;
box-sizing:border-box;
#inner1
height:50%;
width:100%;
display:flex;
justify-content:center;
align-items:center;
#inner2
height:50%;
width:100%;
display:flex;
justify-content:center;
align-items:center;
html, body height: 100%;
#outer
background-color: purple;
#inner1
background-color: yellow;
#inner2
background-color: red;
<div id="outer">
<div id="inner1">
Test text 1
</div>
<div id="inner2">
Test text 1
</div>
</div>
我已经从内部 div 中移除了定位,并将它们设置为 flexbox,从而允许我们使用 justify-content 和 align-items 来实现水平和垂直居中。
【讨论】:
以上是关于垂直对齐另一个div中两个不同div中的文本[重复]的主要内容,如果未能解决你的问题,请参考以下文章
如何左对齐和垂直对齐标题中的图像并将文本水平保持在div的中心[重复]