가운데 맞춤 텍스트에서 div 오른쪽 정렬

Question

본인의 메인 콘텐츠 div가 있고이 상위 div에 가운데 맞춤 된 제목을 만들고 그 아래에 자막이 가운데 정렬 된 가장자리에 오른쪽 정렬되도록하고 싶습니다. 본문. 나는 이것을 힘들게하는 데 어려움을 겪어 왔고,이 사이트와 다른 사이트에서 찾을 수있는 모든 예는 상위 텍스트가 가운데에있을 때 엉망이되는 것처럼 보입니다 (말하자면, 부모에게 왼쪽 정렬 div).

(응용 프로그램 제목이 더 큰 사업부를 중심으로되는 경우) 그것은 다음과 같아야합니다

내가 찾을 수있는 가장 가까운이 질문 (Right-align two divs)이지만 float: left는이 작품을 만들기 위해 매우 중요한 것 같다 내 경우에는 효과가없는 것 같습니다. 다른 솔루션은 display: table과 관련이있는 것 같지만 원하는 효과를 얻으려고 애 쓰고있었습니다.

제목 div는 가변 너비가되어야하며 고대 브라우저를 지원할 필요가 없습니다. 어떤 도움을 주셔서 감사합니다!

Answer 1

여기에 두 가지가 있습니다. 하나는 flex이고 다른 하나는 inline-block입니다. 기본적으로 제목에 대한 컨테이너를 만들고 그 컨테이너를 가운데에 맞춘 다음 오른쪽에 자막을 맞 춥니 다.

* {margin:0;} 
 
h1 { 
 
    font-size: 3em; 
 
} 
 

 
.flex { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
.flex h2 { 
 
    text-align: right; 
 
} 
 

 
.ib { 
 
    text-align: center; 
 
} 
 
.ib header { 
 
    display: inline-block; 
 
} 
 
.ib h2 { 
 
    text-align: right; 
 
}

<section class="flex"> 
 
    <header> 
 
    <h1>app title</h1> 
 
    <h2>subtitle</h2> 
 
    </header> 
 
</section> 
 

 
<section class="ib"> 
 
    <header> 
 
    <h1>app title</h1> 
 
    <h2>subtitle</h2> 
 
    </header> 
 
</section>