다른 div 안에있는 두 개의 다른 div의 텍스트를 정렬하십시오.

Question

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

이 사람이 내 바이올린의 코드를 기반으로이 작업을 수행 할 수있는 방법을 볼 수 있습니다. 미리 감사드립니다.

Answer 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의 발 위치를 제거하고, 따라서 우리 정당화 콘텐츠를 사용하여 수평 및 수직 중심을 달성 - 아이템을 정렬 할 수 있도록, 그들이 flexboxes 만들었다.