CSS Layout - Horizontal & Vertical Align

Center Align Elements

To horizontally center a block element (like <div>), use margin: auto;

Setting the width of the element will prevent it from stretching out to the edges of its container.

The element will then take up the specified width, and the remaining space will be split equally between the two margins:

 

가운데 정렬 요소

block 요소를 가운데 정렬하기 위해선,  margin: auto; 를 사용한다.

요소의 넓이를 설정하는 것은 이것이 컨테이너의 모서리에 뻗어나가는 것을 막는다?

그러면, 요소는 명시된 넓이를 차지할 것이다. 그리고, 여분의 공간은 두 마진 사이에 동등하게 분리될 것이다.

 

Note: Center aligning has no effect if the width property is not set (or set to 100%).

 

주의: width 속성을 설정하지 않거나, 100%로 설정한 가운데 정렬은 효과가 없다.

 

Center Align Text

To just center the text inside an element, use text-align: center;

 

텍스트 가운데 정렬

요소안의 텍스트만 가운데 정렬하기 위해선, text-align:center를 사용하라. 

 

Tip: For more examples on how to align text, see the CSS Text chapter.

 

텍스트를 가운데 정렬하기 위한 많은 예제는 링크 CSS Text 챕터를 보아라.

 

Center an Image

To center an image, set left and right margin to auto and make it into a block element:

 

이미지 가운데 정렬

이미지를 가운데 정렬하기 위해선, 왼쪽과 오른쪽 마진을 auto로 설정하라. 그러면, block요소를 가운데 정렬 가능하게 한다.

 

Left and Right Align - Using position

One method for aligning elements is to use position: absolute;:

 

 

왼쪽과 오른쪽 정렬 - position 사용하기.

요소를 정렬하기 위한 하나의 방법은 position: absolute를 사용하는 것이다.

 

Note: Absolute positioned elements are removed from the normal flow, and can overlap elements.

 

주의 절대값으로 위치가 설정된 요소는 평범한 flow로 부터 제거된다. 그리고 요소를 덮을 수 있다.

 

Left and Right Align - Using float

Another method for aligning elements is to use the float property:

 

왼쪽과 오른쪽 정렬 - float 사용하기

요소를 정렬하기 위한 다른 방법은 float속성을 사용하는 것이다.

 

Note: If an element is taller than the element containing it, and it is floated, it will overflow outside of its container. You can use the "clearfix" hack to fix this (see example below).

 

주의 만일 요소가 요소의 컨테이닝 보다 크다면, 이것은 뜰것이다. 이것은 컨테이너의 바깥편으로 벗어날것이다.

너는 이것을 수정하기 위해서 "clearfix"를 사용할 수 있다.

 

Center Vertically - Using padding

There are many ways to center an element vertically in CSS. A simple solution is to use top and bottom padding:

 

수직적으로 센터 정렬, padding 사용하기

요소를 수직적으로 센터 정렬하기 위해선 많은 방법이 있다. 가장 간단한 방법은 top과 bottom에 패딩을 사용하는 것이다.

 

To center both vertically and horizontally, use padding and text-align: center:

 

수평적으로 수직적으로 가운데 정렬하기 위해선 padding과 text-align:center를 사용하라.

 

Center Vertically - Using line-height

Another trick is to use the line-height property with a value that is equal to the height property.

 

수직적으로 정렬 - line-height를 사용하기

다른 방법은 높이 속성과 같은 값의 line-height 속성을 사용하는 것이다.

 

 

Center Vertically - Using position & transform

If padding and line-height are not options, a third solution is to use positioning and the transform property:

 

수직적으로 정렬 - position & transform 사용하기

padding과 line-height 옵션이 없다면, 3번째 방법은 positioning과 transfomr 속성을 사용하는 것이다.