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>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> <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 class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </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="/java-8-cat/">자바 8</a> </li><li> <a href="/hadoop-tutorial/">하둡 튜토리얼</a> </li><li> <a href="/object-oriented-design/">객체 지향 설계</a> </li><li> <a href="/hibernate-tutorial/">최대 절전 모드 튜토리얼</a> </li><li> <a href="/java-string-programs/">Java 문자열 프로그램</a> </li><li> <a href="/linux-vi-editor/">리눅스 Vi 편집기</a> </li><li> <a href="/cucumber-testing/">오이 테스트</a> </li><li> <a href="/css-properties/">Css 속성</a> </li><li> <a href="/asp-net-tutorial/">Asp .Net 튜토리얼</a> </li><li> <a href="/node-js-fs-module/">Node.js-Fs-모듈</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<div class="content">
<div class="item">
<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">자동 튜토리얼</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="/automata-tutorial/"> <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="/how-calculate-p-hat">P-Hat을 계산하는 방법?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/how-much-does-instagram-pay">Instagram은 조회수 1000회에 대해 얼마를 지불하나요?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/sat-subject-test-math-1-vs-math-2-1311428">SAT 과목 시험 수학 1 vs 수학 2: 어느 것을 봐야 할까요?</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/java-integer-valueof-method">Java 정수 valueOf() 메서드</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/nand-gate">낸드 게이트</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="/how-get-input-from-user-java">자바 사용자 입력</a>
</li><li><a href="/java-convert-object-string">객체를 문자열로 변환</a>
</li><li><a href="/avl-tree">AVL 트리</a>
</li><li><a href="/round-robin-scheduling-algorithm">라운드 로빈 스케줄링 알고리즘</a>
</li><li><a href="/java-convert-string-int">str을 int로</a>
</li><li><a href="/java-collections-emptylist-method">자바 목록이 비어 있음</a>
</li><li><a href="/latex-fonts-size-styles">텍스트 크기 라텍스</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="//no.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>