wiki:css:css_note:css_align

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- wiki:css:css_note:css_align [2021/03/18 12:24]
emblim98
+++ wiki:css:css_note:css_align [2023/01/13 18:44] (현재)
@@ 줄 122: / 줄 122: @@
 </html>
 </code>
+\\
+\\
+=====Center Vertically - Using padding=====
+CSS에서 요소를 수직 방향으로 중앙 정렬하는 많은 방법들이 있습니다. 상단과 하단에 ''pading'' 을 사용하는 것이 간단한 해결책입니다.\\
+====예제====
+<code css>
+.center {
+   border: 3px solid green;
+   padding: 70px 0;
+}
+</code>
+\\
+수직 방향, 수평 방향 모두 중앙 정렬하기 위해서 ''padding'' 속성과''text-align: center'' 속성을 사용합니다.\\
+====예제====
+<code css>
+.center {
+   padding: 70px 0;
+   border: 3px solid green;
+   text-align: center;
+}
+</code>
+\\
+\\
+=====Center Vertically - Using line-height=====
+또 다른 방법은 ''height'' 속성과 동일한 값으로 ''line-height'' 속성을 사용하는 것입니다:\\
+====예제====
+<code css>
+.center {
+   line-height: 200px;
+   height: 200px;
+   border: 3px solid green;
+   text-align: center;
+}
+.center p {   /* 여러 줄의 텍스트인 경우 이 내용을 삽입하세요*/
+   line-height: 1.5;
+   display: inline-block;
+   vertical-align: middle;
+   border: 3px dotted crimson;
+}
+</code>
+\\
+\\
+=====Center Vertically - Using position & transform=====
+''padding''과 ''line-height''를 적용할 수 없는 경우, 다른 해결책은 positioning과 ''transform''속성을 사용하는 것입니다.\\
+====예제====
+<code css>
+.center {
+   height: 200px;
+   position: relative;
+}
+.center p {
+   margin: 0;
+   position: absolute;
+   top: 50%;
+   left: 50%;
+   transform: translate(-50%, -50%);
+   -ms-transform: translate(-50%, -50%);
+}
+</code>
+\\
+\\
+=====Center Vertically - Using Flexbox=====
+중앙 정렬하기 위해 플렉스박스도 사용할 수 있습니다. 플레스박스는 IE10과 이전 버전에서는 지원하지 않음을 명심하세요\\
+====예제====
+<code css>
+.center {
+   border: 2px solid green;
+   justify-content: center;
+   align-items: center;
+   height: 200px;
+   display: flex;
+}
+</code>
 {{tag>오션, CSS Align, layout, Horizontal Align, Vertical Align}}

/var/services/web/dokuwiki/data/attic/wiki/css/css_note/css_align.1616037843.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)