이미지정렬2 css 이미지 수직 정렬 코딩을 하다보면 간혹 이미지를 수직정렬 하는 문제가 생기곤 하는데 이럴때 사용하면 유용할듯하기도 하고 구글링도 귀찮아서 이곳에 남깁니다. 이미지 수직 정렬 방법에는 여러가지가 있는데 첫번째 position 을 이용하는 방법, 두번째는 line-height 를 이용하는 방법, 세번째는 :before / content 를 이용하는 방법, 네번째는 flex를 이용하는 방법이 있습니다. See the Pen Untitled by 진격의 IT (@zsrcvkwa-the-animator) on CodePen. 위 소스를 보고 활용하면 좋을거 같습니다. 2022. 10. 26. css 이미지 가운데 정렬 코딩을 하다보면 가끔씩 이미지 중앙정렬을 검색하게 됩니다. 이게 외워서 하면 좋은데 잘 안외워져서... 걍 이곳에 남김! 첫번째 방법 그런데 위 방법이 간혹 안되는 경우가 있는데 그럴땐 두번째 방법 img { margin: auto; display: block; } margin auto 만으론 중앙정렬이 안됨! 그래서 블록으로 감싸줌 그리고 마지막 세번째 div { display: flex; justify-content: center; } img { width: 60%; } 세 번째 방법은 display flex를 사용하는 것입니다. display flex 만으론 작동하지 않아서 justify-content 라는 추가적인 속성을 줍니다. 우선 수평으로 가운데 정렬이고 담번에 수직 가운데 정렬도 넣어놔야겠.. 2022. 10. 25. 이전 1 다음
