안녕하세요,
저는 Discourse를 사용 중이며, “Banner Topic” 기능을 이용해 닫을 수 있는 배너를 생성하려고 하고 있습니다. 제 사이트 언어는 페르시아어(RTL - 오른쪽에서 왼쪽으로 읽기)입니다.
주제(topic)의 첫 번째 게시물에 인라인 스타일이 포함된 HTML 콘텐츠를 추가했고, 배너는 정상적으로 표시되지만, 배너 프레임 내에서 콘텐츠를 수평으로 중앙 정렬하는 데 어려움을 겪고 있습니다.
문제점:
기본적으로 배너 안의 콘텐츠는 오른쪽으로 정렬되어 표시됩니다. 중앙 정렬을 시도해도 완벽하게 정렬되지 않으며, 특히 배너 내부의 다른 줄이나 콘텐츠 블록에 비해 첫 번째 줄의 텍스트가 약간 오른쪽으로 치우쳐 보입니다. 첫 번째 줄의 콘텐츠 내용과 관계없이 이 정렬 오류가 지속됩니다.
중앙 정렬을 위해 시도한 방법:
-
게시물의 HTML 내 주요 div 컨테이너에 표준 CSS
text-align: center;적용.- 결과: 콘텐츠가 여전히 오른쪽으로 정렬됨.
-
주요 div에
text-align: center !important;적용.- 결과: 콘텐츠가 여전히 오른쪽으로 정렬됨.
-
주요 div에 비추천(deprecated)된 HTML
align="center"속성 사용.- 결과: 콘텐츠가 중앙 쪽으로 이동하긴 했지만, 첫 번째 줄/블록과 후속 줄/블록 간의 정렬이 완벽하지 않았으며, 다른 줄에 비해 첫 번째 줄이 약간 오른쪽으로 치우쳐 보임.
-
내부 HTML 구조 단순화 (예:
<br>를 사용하여 텍스트 줄을 더 적은 단락으로 결합).- 결과: 콘텐츠 블록 간 정렬 문제를 해결하지 못함.
-
첫 번째 단락/블록에 수동으로 음수
margin-left추가 시도.- 결과: 정렬을 일관되게 수정하는 데 효과적이지 못함.
-
다양한 브라우저(Chrome, Firefox)에서 테스트.
- 결과: 브라우저 간에 문제가 일관되게 발생함.
원본 게시물에서 사용한 예시 HTML 구조 (단순화됨):
HTML<div align="center" style="background-color: #f0f0f0; border: 1px solid #ccc; border-radius: 5px; padding: 10px;">
<p style="font-size: 1.1em; font-weight: bold; color: #333;">
첫 번째 줄 / 텍스트 블록 (예: 제목)<br>
같은 블록 내 두 번째 줄 (예: 부제목)
</p>
<p style="margin-top: 15px;">
다른 블록 (예: 링크 줄)
</p>
</div>
(참고: text-align: center가 효과가 없었기 때문에 여기서는 align="center"를 사용함)
관찰 / 의심되는 원인:
text-align: center가 아무 효과도 없고, align="center"가 부분적으로 작동하지만 내부 정렬이 완벽하지 않으므로, Discourse 테마나 핵심 배너 렌더링 내부에서 간섭을 일으키는 CSS 규칙이 있다고 의심합니다. RTL 레이아웃에서 배너 왼쪽에 위치한 닫기(‘X’) 버튼 위해 예약된 공간이 나머지 콘텐츠 영역의 중앙 정렬 방식에 영향을 미칠 수도 있습니다.
질문:
RTL Discourse 사이트에서 "Banner Topic"을 통해 생성된 닫을 수 있는 배너 내부의 콘텐츠를 완벽하게 수평 중앙 정렬하는 권장 방법은 무엇입니까? 충돌하는 규칙을 올바르게 오버라이드하여 배너 콘텐츠 블록의 정확한 중앙 정렬을 보장하기 위해 테마 커스터마이징에 추가해야 하는 특정 CSS 스니펫이 있는가? (이것이 관리자 권한이 필요하다는 점을 인지하고 있습니다.)
도움이나 통찰을 주시면 매우 감사하겠습니다!
감사합니다.