동일한 태그의 텍스트를 어떻게 다르게 정렬 할 수 있습니까?

Question

그래서 h2 태그 사이에 일부 텍스트가 있습니다. 기본적으로 전체 h2 태그를 페이지의 가운데에 배치하려고합니다. 그러나 두 번째 줄에 텍스트를 넣고 싶습니다. 오른쪽으로 정렬되어 있습니다.

그래서 다음과 같이 보일 것입니다 :

Answer 1

당신은 CSS 깨끗하고 간단한 해결책에 대한 인 flexbox 사용할 수 있습니다.

main {       /* 1 */ 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 

 
h2 { 
 
    display: inline-flex;   /* 2 */ 
 
    flex-direction: column; 
 
    align-items: center; 
 
    margin: 0; 
 
} 
 

 
h2>span { 
 
    margin-left: auto;   /* 3 */ 
 
}

<main> 
 
    <h2> 
 
    WebsiteName<span>.com</span> 
 
    </h2> 
 
</main>

주 :

1. 블록 수준 컨테이너; 가로로 중앙에 놓을 공간이 h2이됩니다.
2. h2을 인라인 수준 컨테이너로 지정하면 내용의 너비가 넓어집니다. 이렇게하면 첫 번째와 두 번째 줄이 오른쪽으로 정렬됩니다.
3. 두 번째 줄을 오른쪽에 맞 춥니 다. 코멘트의 피드백에 기초 절대 위치를 사용

---

대체 방법은 :

h2 { 
 
    display: inline-flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    margin: 0; 
 
    position: absolute; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
} 
 

 
h2>span { 
 
    margin-left: auto; 
 
}

<h2> 
 
    WebsiteName<span>.com</span> 
 
</h2>

Answer 2

당신은 태그 나 정의 된 클래스 플로트 속성을 시도 할 수 있습니다. 다음 구문을 추가하여

Answer 3

:

.class_name tag_name