이미지 우측에 중앙정렬이 안됩니다.. 채택완료
<figure>
<img src="/images/user1.jpg" height=100px>
</figure>
닉네임: 강백호
원래 코딩할때는 이렇게 하면 이미지옆에 중앙에 강백호가 들어왔는데요
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
이걸위에 가져오고나니까
닉네임이:강백호가 이미지 하단쯤에 맞춰서 나오는데 중앙으로 올리질못하겠네요;;ㅜㅜ
<figure> 이걸 제거하니까 되긴하는데.. 현재 상태 그대로 중앙으로 살짝 올릴려면 어떻게 해야하나요?
답변 1개
채택된 답변
+20 포인트
glitter0gim10개월 전
Copy
닉네임: 강백호
사용하고 계신 Bootstrap-icons CSS에서
기본적으로 <figure> 태그의 스타일을 일부 조정하여 발생하는 문제로 보입니다.
부스트랩아이콘을 로드시 <figure> 요소에 대해 일부 CSS 초기화가 적용될 수 있습니다.
이 때문에 이미지 옆 텍스트가 수직 중앙이 아닌 하단 정렬되는 현상이 나타납니다.
이 상태를 유지한 채로 이미지를 우측에 두고, 옆에 있는 닉네임을 수직 중앙에 두시려면
CSS의 flex를 활용하여 정렬하는 방법이 가장 확실하실 겁니다.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 2개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인