<![CDATA[
<p><span style="color: #333333;" data-ke-size="size18">1. CSS에서 Text-Align Center 속성으로 텍스트를 중앙 정렬하는 방법 </span></p><p><span style="color: #333333;" data-ke-size="size18">2. CSS에서 Margin Auto로 Div를 중앙 정렬하는 방법 </span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18">1. HTML</span></p><p><span style="color: #333333;" data-ke-size="size18"><!DOCTYPE html></span></p><p><span style="color: #333333;" data-ke-size="size18"><html lang="en"></span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18"><head></span></p><p><span style="color: #333333;" data-ke-size="size18">    <meta charset="UTF-8"></span></p><p><span style="color: #333333;" data-ke-size="size18">    <meta name="viewport" content="width=device-width, initial-scale=1.0"></span></p><p><span style="color: #333333;" data-ke-size="size18">    <title>Center</title></span></p><p><span style="color: #333333;" data-ke-size="size18">    <link rel="stylesheet" href="center.css"></span></p><p><span style="color: #333333;" data-ke-size="size18"></head></span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18"><body></span></p><p><span style="color: #333333;" data-ke-size="size18">    <div class="container"></span></p><p><span style="color: #333333;" data-ke-size="size18">        <p>Hello, (centered) World!</p></span></p><p><span style="color: #333333;" data-ke-size="size18">    </div></span></p><p><span style="color: #333333;" data-ke-size="size18">    <div class="container"></span></p><p><span style="color: #333333;" data-ke-size="size18">        <div class="child"></div></span></p><p><span style="color: #333333;" data-ke-size="size18">    </div></span></p><p><span style="color: #333333;" data-ke-size="size18"></body></span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18"></html></span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18">2. CSS</span></p><p><span style="color: #333333;" data-ke-size="size18">.container {</span></p><p><span style="color: #333333;" data-ke-size="size18">    font-family: Arial, Helvetica, sans-serif;</span></p><p><span style="color: #333333;" data-ke-size="size18">    font-size: 1.5rem;</span></p><p><span style="color: #333333;" data-ke-size="size18">    margin: 25px;   /* 마진 - 위, 오른쪽, 아래, 왼쪽 */</span></p><p><span style="color: #333333;" data-ke-size="size18">    width: 350px;   /* 너비 */</span></p><p><span style="color: #333333;" data-ke-size="size18">    height: 200px;  /* 높이 */</span></p><p><span style="color: #333333;" data-ke-size="size18">    border: 1px solid #000; /* 테두리 */</span></p><p><span style="color: #333333;" data-ke-size="size18">    outline: dashed 1px red;</span></p><p><span style="color: #333333;" data-ke-size="size18">}</span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18">p {</span></p><p><span style="color: #333333;" data-ke-size="size18">    text-align: center;</span></p><p><span style="color: #333333;" data-ke-size="size18">    line-height: 100px;</span></p><p><span style="color: #333333;" data-ke-size="size18">    margin: 5px;</span></p><p><span style="color: #333333;" data-ke-size="size18">    padding: 5px;</span></p><p><span style="color: #333333;" data-ke-size="size18">    border: 1px solid blue;</span></p><p><span style="color: #333333;" data-ke-size="size18">}</span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18">.child {</span></p><p><span style="color: #333333;" data-ke-size="size18">    width: 50px;</span></p><p><span style="color: #333333;" data-ke-size="size18">    height: 50px;</span></p><p><span style="color: #333333;" data-ke-size="size18">    background-color: red;</span></p><p><span style="color: #333333;" data-ke-size="size18">    margin: 0 auto;                 /* 수평 가운데 정렬 */</span></p><p><span style="color: #333333;" data-ke-size="size18">    border: 1px solid blue;</span></p><p><span style="color: #333333;" data-ke-size="size18">}</span></p><p> </p><p><span style="color: #333333;" data-ke-size="size18">3. 실행 결과 </span></p><div class="figure-img" data-ke-type="image" data-ke-style="alignCenter" data-ke-mobilestyle="widthOrigin"><img src="https://t1.daumcdn.net/cafeattach/1PqNJ/8e156409bbad831c061033e31031a5849d7f64ec" class="txc-image" data-img-src="https://t1.daumcdn.net/cafeattach/1PqNJ/8e156409bbad831c061033e31031a5849d7f64ec" data-origin-width="439" data-origin-height="527"></div>
<!-- -->
]]>
카페 게시글
CSS
src
CSS로 중앙 정렬하는 방법(1)
주인장
추천 0
조회 14
24.05.09 01:40
댓글 0
다음검색
