오른쪽에 아이콘을 배치하려는 바닥 글이 있습니다. 아이콘의 너비와 높이는 36 픽셀입니다. div패딩이 7 픽셀 인 컨테이너 내부에 있습니다.
내 계산에서 아이콘은 세로 중앙에 있어야하지만 그렇지 않습니다.
아이콘의 상단, 하단 및 오른쪽에 동일한 패딩이 있기를 원합니다.
내가 무엇을 잘못하고 있지?
HTML :
<div data-role="header" class="pageheader"></div>
<div data-role="footer" class="pagefooter">
<div class="info-icon">
<a class="info-anchor" href="#" style="text-decoration: none; text-shadow: none; color: #ffffff;">
<img class="info-img" src="https://storage.googleapis.com/material-icons/external-assets/v1/icons/svg/ic_info_outline_black_36px.svg">
</a>
</div>
</div>
CSS :
.info-icon {
z-index: 200;
position: absolute;
padding: 7px;
margin: 0;
display: inline-block;
right: 0;
bottom: 0;
background-color: #00ff00;
}
.info-anchor {
background-color: #0000ff;
padding: 0;
}
.info-img {
background-color: #ffffff;
margin: 0;
}
[data-role="header"], [data-role="footer"] {
height: 50px !important;
background-color: #ff0000 !important;
width: 100% !important;
border: 0 !important;
text-align: center !important;
text-shadow: none !important;
color: #ffffff !important;
}
[data-role="footer"] {
bottom: 0;
position: absolute;
}
단지 추가 display:block사용자에 .info-img그렇지 않으면 (이미지는 별도의 바닥 공간을 얻을 수 inline기본적으로 요소). .info-anchor전체 이미지를 덮도록 추가 할 수도 있습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다