div 블록 내에서 텍스트를 가로 및 세로 중앙에 배치 시각적으로 매력적인 레이아웃을 만드는 데 중요합니다. Flexbox, 그리드 및 CSS 변환과 같은 다양한 방법은 뚜렷한 장점과 단점이 있는 솔루션을 제공합니다. 이 문서에서는 div 블록 내에서 텍스트 중심을 맞추기 위한 일반적인 접근 방식을 살펴봅니다.
내용의 테이블
Flexbox 사용:
- 상위 컨테이너를 다음으로 설정합니다. 디스플레이: 플렉스; 이를 통해 다음을 사용할 수 있습니다. 플렉스박스 상위 컨테이너를 플렉스 컨테이너로 바꿉니다.
- 사용 정당화 콘텐츠: 센터 부모 컨테이너 내에서 자식 요소를 가로 중앙에 배치합니다.
- 사용 항목 정렬: 가운데 상위 컨테이너 내에서 하위 요소를 수직으로 가운데에 배치합니다.
예: 이 예에서는 flexbox 속성을 사용하여 div 내부의 텍스트를 가운데에 배치하는 방법을 보여줍니다. CSS .
HTML div 블록 제목 내에서 텍스트를 가로 및 세로로 가운데에 배치합니다.><style>body { 텍스트 정렬: 중앙; } .container { 높이: 300px; 너비: 645px; 디스플레이: 플렉스; 내용 정당화: 센터; 항목 정렬: 중앙; 테두리: 2px 단색 검정; } h1 { 색상: 녹색; } 스타일> 머리> <body> <div> <h1>GeekforGeeksh1> div> 본문> html>></pre> </code> <p dir='ltr'> <b> <strong>산출:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><h2 id='using-grid'><span>그리드 사용</span></h2><ul><li value='1'> <span>CSS 그리드</span> <span>복잡하고 유연한 그리드 기반 레이아웃을 만들 수 있는 또 다른 인기 있는 레이아웃 도구입니다.</span></li><li value='2'><span>상위 컨테이너를 다음으로 설정합니다.</span> <b> <strong>디스플레이: 그리드</strong> </b> <span>. 이를 통해 CSS 그리드를 사용할 수 있으며 상위 컨테이너가 그리드 컨테이너로 전환됩니다.</span></li><li value='3'><span>사용</span> <b> <strong> </strong> </b> <b> <strong>장소 항목: 센터</strong> </b> <span>속성을 사용하여 그리드 셀 내에서 하위 요소를 가로 및 세로 중앙에 배치할 수 있습니다. 이 속성은 두 속성 모두에 대한 약어입니다.</span> <b> <strong>정당화 항목</strong> </b> <span>그리고</span> <b> <strong>항목 정렬</strong> </b> <span>.</span></li></ul><p dir='ltr'> <b> <strong>예:</strong> </b> <span>이 예에서는 CSS의 그리드 속성을 사용하여 div 내부의 텍스트를 중앙에 배치하는 방법을 보여줍니다.</span></p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br />HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <title>div 블록 제목 내에서 텍스트를 가로 및 세로로 가운데에 배치합니다.><style>.container { 높이: 300px; 너비: 645px; 디스플레이: 그리드; 장소 항목: 센터; 테두리: 2px 단색 검정; } h1 { 색상: 녹색; } 스타일> 머리> <body> <div> <h1>GeekforGeeksh1> div> 본문> html>></pre> </code> <p dir='ltr'> <b> <strong>산출:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><h2 id='using-text-align'> <b> <strong>텍스트 정렬 사용:</strong> </b> </h2><ul><li value='1'><span>그만큼</span> <span>텍스트 정렬</span> <span>속성은 div 블록 내에서 텍스트를 가로 중앙에 배치하는 간단하고 직접적인 방법입니다.</span></li><li value='2'><span>상위 컨테이너를 다음으로 설정합니다.</span> <b> <strong>텍스트 정렬: 가운데.</strong> </b> <span>이렇게 하면 하위 요소가 상위 컨테이너 내에서 수평으로 중앙에 배치됩니다.</span></li><li value='3'><span>사용</span> <b> <strong>줄 높이:</strong> </b> <span>상위 컨테이너 내에서 하위 요소를 수직으로 가운데에 배치합니다. 값은 상위 컨테이너의 높이와 같아야 합니다.</span></li></ul><p dir='ltr'> <b> <strong>예:</strong> </b> <span>이 예에서는 CSS의 텍스트 정렬을 사용하여 div 내부의 텍스트를 중앙에 배치하는 방법을 보여줍니다.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <title>div 블록 제목 내에서 텍스트를 가로 및 세로로 가운데에 배치합니다.><style>.container { 높이: 300px; 너비: 645px; 텍스트 정렬: 중앙; 줄 높이: 400px; 테두리: 2px 단색 검정; } h1 { 색상: 녹색; } 스타일> 머리> <body> <div> <h1>GeekforGeeksh1> div> 본문> html>></pre> </code> <p dir='ltr'> <b> <strong>산출:</strong> </b> </p> <br /> <div id="container-4ae8242bd8e42d94c5c0bf390d5144e6"></div><br /> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><h2 id='using-table-cell'><span>테이블 셀 사용</span></h2><ul><li value='1'><span>상위 컨테이너를 다음으로 설정합니다.</span> <b> <strong>디스플레이: 테이블.</strong> </b> <span>이는 테이블의 동작을 에뮬레이트합니다.</span></li><li value='2'><span>하위 요소를 다음으로 설정합니다.</span> <b> <strong>디스플레이: 테이블 셀</strong> </b> <span>. 이는 테이블 셀의 동작을 에뮬레이트합니다.</span></li><li value='3'><span>사용</span> <b> <strong>수직 정렬: 중간</strong> </b> <span>상위 컨테이너 내에서 하위 요소를 수직으로 가운데에 배치합니다.</span></li><li value='4'><span>사용</span> <b> <strong>텍스트 정렬: 가운데</strong> </b> <span>부모 컨테이너 내에서 자식 요소를 가로 중앙에 배치합니다.</span></li></ul><p dir='ltr'> <b> <strong>예:</strong> </b> <span>이 예에서는 CSS의 텍스트 테이블 셀을 사용하여 div 내부의 텍스트를 가운데에 배치하는 방법을 보여줍니다.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <title>div 블록 제목 내에서 텍스트를 가로 및 세로로 가운데에 배치합니다.><style>.container { 높이: 300px; 너비: 645px; 디스플레이: 테이블 셀; 텍스트 정렬: 중앙; 수직 정렬: 중간; 테두리: 2px 단색 검정; } h1 { 색상: 녹색; } 스타일> 머리> <body> <div> <h1>GeekforGeeksh1> div> 본문> html>></pre> </code> <p dir='ltr'> <b> <strong>산출:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><h2 id='using-transform-property'><span>변환 속성 사용:</span></h2><ul><li value='1'><span>상위 컨테이너를 다음으로 설정합니다.</span> <b> <strong>위치: 친척.</strong> </b> <span>이를 통해 하위 요소에 대한 절대 위치 지정을 사용할 수 있습니다.</span></li><li value='2'><span>하위 요소를 다음으로 설정합니다.</span> <b> <strong>위치: 절대.</strong> </b> <span>이를 통해 하위 요소에 대한 절대 위치 지정을 사용할 수 있습니다.</span></li><li value='3'><span>하위 요소를 설정합니다.</span> <b> <strong>맨 위</strong> </b> <span>그리고</span> <b> <strong>왼쪽</strong> </b> <span>속성</span> <b> <strong>오십%</strong> </b> <span>. 이렇게 하면 하위 요소가 상위 컨테이너의 중앙에 배치됩니다.</span></li><li value='4'><span>사용</span> <b> <strong>변형: 번역(-50%, -50%)</strong> </b> <span>하위 요소를 수평 및 수직 중앙에 배치합니다.</span></li></ul><p dir='ltr'> <b> <strong>예:</strong> </b> <span>이 예에서는 CSS의 변환 속성을 사용하여 div 내부의 텍스트를 가운데에 배치하는 방법을 보여줍니다.</span></p>HTML<code class='hljs'> <pre class='hljs'> <html lang='en'> <head> <title>div 블록 제목 내에서 텍스트를 가로 및 세로로 가운데에 배치합니다.><style>.container { 높이: 300px; 너비: 645px; 위치: 상대; 테두리: 2px 단색 검정; } h1 { 위치: 절대; 최고: 50%; 색상: 녹색; 왼쪽: 50%; 변환: 변환(-50%, -50%); } 스타일> 머리> <body> <div> <h1>GeekforGeeksh1> div> 본문> html>></pre> </code> <p dir='ltr'> <b> <strong>산출:</strong> </b> </p> <img src='//techcodeview.com/img/css-questions/74/how-center-text-horizontally.webp' alt=""><p dir='ltr'><span>요약하자면, 선택한 접근 방식은 특정 사용 사례, 다른 요소와의 호환성 및 원하는 디자인 미학에 따라 달라집니다. 이러한 방법을 사용하면 다양한 레이아웃과 디자인으로 텍스트 블록을 중앙에 배치할 수 있습니다.</span></p> <br> <br></article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">범주</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/github/">Github</a> </li><li> <a href="/css-basics/">Css 기본</a> </li><li> <a href="/java-advanced/">자바 고급</a> </li><li> <a href="/ruby-tutorial/">루비 튜토리얼</a> </li><li> <a href="/finance-maq/">금융 Maq</a> </li><li> <a href="/blog/">블로그</a> </li><li> <a href="/microsoftexcel/">마이크로 소프트 엑셀</a> </li><li> <a href="/python-gui/">Python-Gui</a> </li><li> <a href="/avl-tree/">Avl-트리</a> </li><li> <a href="/atoms-ions/">원자와 이온</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<h2 class="heading">로컬호스트 3000</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> 괴짜를 위한 컴퓨터 공학 포털입니다. 여기에는 잘 쓰여지고, 잘 생각되고, 잘 설명된 컴퓨터 과학 및 프로그래밍 기사, 퀴즈 및 연습/경쟁 프로그래밍/회사 인터뷰 질문이 포함되어 있습니다.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/localhost-3000"> <i class="fa fa-external-link"></i> 자세히보기</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">재미있는 기사</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/text-gimp">김프의 텍스트</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/computer-network-tutorial">컴퓨터 네트워크 튜토리얼</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/asynchronous-transfer-mode-computer-network">컴퓨터 네트워크의 비동기 전송 모드(ATM)</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/rashi-zodiac-chart-know-your-rashi-name">라시/황도대 차트: 이름과 생년월일로 라시를 알아보세요.</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/python-numpy-sorting-searching/">Python Numpy 정렬 검색</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">인기 게시물</h2>
<div class="content">
<ul class="list"> <li><a href="/typescript-foreach">각각에 대한 타이프 스크립트</a>
</li><li><a href="/java-string-length">문자열 자바의 길이</a>
</li><li><a href="/polymorphism-java">다형성</a>
</li><li><a href="/java-string-compareto">자바 비교 방법</a>
</li><li><a href="/npm-clear-cache">npm 클린 캐시</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 판권 소유 | <a href="//uk.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">부인 성명</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">회사 소개</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">개인 정보 보호 정책</a> </span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
</body>
</html>