이미지 가운데 정렬하는 방법

이미지를 가운데 정렬하는 방법은 여러 가지가 있습니다. 그 중 자주 사용되는 두 가지를 소개합니다.
1 min read

이미지 가운데 정렬하는 방법

이미지를 가운데 정렬하는 방법은 여러 가지가 있습니다. 그 중 자주 사용되는 두 가지를 소개합니다.

 

방법 1

이미지의 부모 요소에 text-align 속성을 추가하는 방법입니다.

<div>
  <img src="https://bit.ly/2GrygUe" alt="">
</div>
div {
  text-align: center;
}

 

방법 2

부모 요소를 사용할 수 없다면, img 요소를 block 요소로 만든 후 margin 속성을 이용해서 가운데에 위치시킬 수 있습니다.

img {
  display: block;
  margin: 0 auto;
}

 

기타 CSS 참조

You may like these posts

  • 선형 그러데이션이란 색상이수직이나 수평 또는 대각선 방향으로 일정하게 변하는 것을 말합니다. 이것을 만들어 주느 함수는 linear-dradient인데 색상이 어느 방향으로 바뀌고 어떤 색상으로 바뀌는지 알려 주어야 합니다. 선형 그러데이션 구문에서 사용하는 옵션을 하나씩 살펴보겠습니다. linea…
  • 이미지 비율 맞추기 텍스트는 일반적으로 바뀐 폭에 맞추어 자동으로 줄바꿈이 되지만, 이미지는 줄바꿈이라는 게 없기 때문에 문제가 생깁니다. 어떤 문제가 발생하는지 살펴보고 해결책을 찾아보겠습니다.   이미지 크기를 정하지 않은 경우 이미지의 크기를 정하지 않으면 부모 요소보…
  • clip clip 속성으로 요소의 특정 부분만 나오도록 할 수 있습니다. position 속성값이 absolute 또는 fixed일 때만 적용됩니다.   기본형 clip : auto | shape auto : 요소의 모든 부분이 나옵니다. shape : 특정 부분이 나오도록…
  • opacity opacity로 투명도를 정할 수 있습니다.   기본형 opacity : number number : 0 부터 1.0 까지의 수를 넣습니다. 숫자가 작을수록 투명해집니다.   예제 <div cla…
  • calc() calc()는 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수입니다.   예를 들어 font-size : calc( 10px + 10px ); 는 글자 크기를 20px로 만듭니다.   문법 연산자 +는 덧셈, -는 뺄셈, *는 곱셈, /는…
  • 이미지 가운데 정렬하는 방법 이미지를 가운데 정렬하는 방법은 여러 가지가 있습니다. 그 중 자주 사용되는 두 가지를 소개합니다.   방법 1 이미지의 부모 요소에 text-align 속성을 추가하는 방법입니다. <div> …

Post a Comment