• 회원가입
  • 로그인
  • 구글아이디로 로그인

[image] CSS - enter an Image (이미지 가운데정렬)

 

방법1 - img 자체 이용
img 요소를 display:block 속성 이용해 블럭 요소로 만들고, margin 좌우를 auto 주면 됨.


<style>

img {

    display: block;

    margin-left: auto;

    margin-right: auto;

}

</style>


<div>

   <img src="https://homzzang.com/data/logo-planner/1993870266_2ba60bdc_spelling.png" alt="homzzang">

</div>

결과 보기

 

방법2 - 부모 요소 이용
바로 위 부모 요소에 text-align:center 속성 주면 됨.

 

<style>

div {

    text-align:center;

}

</style>


<div>

   <img src="https://homzzang.com/data/logo-planner/1993870266_2ba60bdc_spelling.png" alt="homzzang">

</div>



결과 보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
image CSS - Rounded Images (둥근/동그란 이미지 만들기 = 이미지 테두리 둥글게/동그랗게) - I…
image CSS - Thumbnail Images - (썸네일 이미지 스타일)
image CSS - enter an Image (이미지 가운데정렬)
image CSS - Image Text - (이미지 위에 텍스트 배치/띄우기)
image CSS - Polaroid Images / Cards - (폴라로이드 이미지)
image CSS - Image Filter - (이미지 필터 - 흑백/흐림 효과)
image CSS - Image Hover Overlay - (이미지 마우스오버시 효과 = 이미지허버효과 = 이미지마우…
image CSS - Image Modal - (Advanced) - (이미지 모달 띄우기 효과)
image CSS - filter 속성 - 이미지필터효과 (= filter속성 = 필터속성) ※ 흑백이미지만들기 ※ 이…
image CSS - object-fit 속성 - 컨테이너에 맞게 '이미지/비디오' 크기 조정 방법 지정 (= obje…
image CSS - object-position 속성 - <img>/<video>가 "자체 콘텐츠 상자" 내부의 x/…
image CSS - image-rendering 속성 - 크기 조정 가능 이미지의 렌더링 방식 지정 (= image-…
목록
찾아주셔서 감사합니다. Since 2012