[CSS] 요소별 수직, 수평 정렬 방법, 수평 수직 정렬

요소별 수직, 수평 정렬 방법, 수평 수직 정렬

2017.07.24 in CSS

1. 수직정렬
2. block 자체 수평정렬
3. inline 수평정렬
4. 정중앙 정렬(flex)

수직정렬

1. 바깥 요소(outer)로 감싼다.
2. height를 설정한다.
3. 바깥요소에 vertical-align:middle; display:table-cell; 셋팅

1 2 3

<div id="outer" style="height:100px;"> <span id="inner"></span> </div>

vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;

https://www.w3schools.com/cssref/playit.asp?filename=playcss_vertical-align&preval=25px

또는 flex를 활용

요소에

1. display:flex; align-items:center 하거나
2. display:flex; flex-direction:column;justify-content:center;

둘중 하나를 사용

block 자체 수평 정렬

block 요소는 원래 한줄을 다 차지한다. 따라서 요소 자체의 수평정렬이 불가하다. 그렇기 때문에 width를 통해 정렬이 가능하도록 해주고 해주고 왼쪽 오른쪽 마진 값, 또는 float으로 정렬한다.

• 수평정렬

  • block 요소의 정렬을 위해서는 width 설정이 필요.

  • 가운데 정렬 : 좌우의 margin 값을 auto로 자동 맞춤 margin: 0 auto

  • 왼쪽 오른쪽 정렬 : float: left, right

inline 수평 정렬

• inline요소의 경우 감싸는 wrapper div 추가가 필요
  • text-align: left,right,center : inline을 감싸고 있는 div에 적용.

1 2 3

<div style="text-align:center;"> <span>sdfsdf</span> </div>

수평 수직 정렬

1 2 3 4 5 6 7 8 9 10 11 12 13

.area{ height: 100px; width: 100px; background: red; margin:10px; text-align: center; display:table-cell; vertical-align:middle; } <div class="area"> 울랄라 </div>

flex 이용

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

#outer { display: flex; /* establish flex container */ flex-direction: column; /* make main axis vertical */ justify-content: center; /* center items vertically, in this case */ align-items: center; /* center items horizontally, in this case */ border: 1px grey solid; } #inner { margin: 5px; text-align: center; /* will center text in <p>, which is not a flex item */ } <div id="outer" style="height:100px;"> <span id="inner">12345</span> </div>

Reference

https://www.w3schools.com/cssref/pr_pos_vertical-align.asp

http://inspiredjw.com/entry/CSS%EB%A1%9C-DIV-%ED%83%9C%EA%B7%B8%EB%A5%BC-%EC%83%81%ED%95%98-%EC%A2%8C%EC%9A%B0-%EA%B0%80%EC%9A%B4%EB%8D%B0-%EC%A0%95%EB%A0%AC%ED%95%98%EA%B8%B0

https://stackoverflow.com/questions/19026884/flexbox-center-horizontally-and-vertically

 

출처: https://skout90.github.io/2017/07/24/CSS/%EC%9A%94%EC%86%8C%EB%B2%8C-%EC%A0%95%EB%A0%AC%EB%B0%A9%EB%B2%95/