이미지 우측에 중앙정렬이 안됩니다..
본문
<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
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<div style="display: flex; align-items: center; justify-content: flex-end;">
<figure style="margin: 0;">
<img src="/images/user1.jpg" height="100px">
</figure>
<span style="margin-left: 8px;">닉네임: 강백호</span>
</div>
사용하고 계신 Bootstrap-icons CSS에서
기본적으로 <figure> 태그의 스타일을 일부 조정하여 발생하는 문제로 보입니다.
부스트랩아이콘을 로드시 <figure> 요소에 대해 일부 CSS 초기화가 적용될 수 있습니다.
이 때문에 이미지 옆 텍스트가 수직 중앙이 아닌 하단 정렬되는 현상이 나타납니다.
이 상태를 유지한 채로 이미지를 우측에 두고, 옆에 있는 닉네임을 수직 중앙에 두시려면
CSS의 flex를 활용하여 정렬하는 방법이 가장 확실하실 겁니다.
감사합니다!!! 너무 많이 배우고 잇습니다
감사합니다. (●'◡'●)
답변을 작성하시기 전에 로그인 해주세요.