절대 div 안에 텍스트 줄 바꿈

Question

점진적 웹 앱을 만들기 위해 Vue Onsen UI를 사용하고 있습니다. 나는 조금 길어질 수있는 타이틀을 가지고 있으며, 나는 그것을 정상적으로 감싸는 것을 기대하는 중심에 배치 할 것이지만, 그렇게하지는 않습니다. toolbar 클래스는 절대적으로 배치됩니다.

여기 웹 사이트에는 working example입니다.

테스트하려면 div.center 안에있는 텍스트의 크기를 늘려야합니다.

누군가가 나를 이해하고이 문제를 해결할 수 있도록 도와 줄 수 있습니까? 더 많은 정보가 필요한지 알려주십시오.

Answer 1

CSS 클래스 '센터'는 공백 및 라인 높이를 속성을 오버라이드 (override)되는 것처럼 그것은 나타납니다. 다음과 같이 작동합니다.

.multiline-center { 
    height:100%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    white-space:normal; 
    line-height:12pt 
} 

<div class="center"> 
    <div class="multiline-center"> 
     {{ title }} 
    </div> 
</div>