垂直对齐另一个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中的垂直对齐div [重复]

如何左对齐和垂直对齐标题中的图像并将文本水平保持在div的中心[重复]

在 div 中垂直对齐 [重复]

垂直居中和居中对齐文本并为 div 添加边距?我迷路了[重复]

垂直对齐位于浮动同级旁边的 Div 中的多行文本

Bootstrap 4中的垂直对齐DIV和文本