2016-06-16 5 views
-1

나는 완벽하게 맞는 아이콘이 있습니다,하지만 때로는 내 아이콘 중심 떨어져 있으며 차단 얻을 :MDL 아이콘 오프 센터

enter image description here

<button hidden id="sign-up-float-icon" class="floater mdl-button mdl-js-button mdl-button--icon"> 
     <i class="material-icons">more_vert</i> 
    </button> 

    <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="sign-up-float-icon"> 
     <li class="mdl-menu__item" id="sign-up-email"> 
     Register with Email 
     </li> 
     <li class="mdl-menu__item" id="sign-in-google"> 
     Login with Google 
     </li> 
    </ul> 

얼굴 아이콘이 좋아 보인다. 가장 오른쪽의 '옵션'아이콘이 잘린 것처럼 보입니다. 버튼을 클릭하면 제대로 작동하지만 제대로 보이지 않습니다. 무슨 일이야? 난 MDL 구성 요소를 읽고 의사와 의사를 시도했지만 여전히 솔루션을 찾을 수 없습니다. 당신의 도움이 답변

에 대한

감사

편집 :

내가 요소 모양을 포함 시켰습니다. 보시다시피 버튼은 정렬되지만 이미지가 약간 올라갔습니다.

enter image description here enter image description here

몇 가지 테스트 후 문제가

답변

0

CSS 수직 정렬이이 문제를 해결할 수있는 코드에 문제가 있음을 확인할 수 있습니다. material-icons 요소에 클래스를 추가하고 시작하려면 vertical-align: 15%;을 적용하면됩니다. 원하는 번호를 얻을 때까지 번호를 변경하십시오.

+0

답장을 보내 주셔서 감사합니다. 그러나 적용한 후에는 위치를 전혀 변경하지 않습니다! 또한 버튼 요소를 변경하려고했지만 아무런 영향을 미치지 않았습니다. 다른 생각이 있다면 –

+0

more_vert라고 말하면 CSS에서 .align {vertical-align : 25 %;} ... 또는 15 % 또는 -15 %까지 너는 그것을 얻는다. –

+0

그래, 그게 내가 한 짓이야, 불행히도 나는 그것이 변화 볼 수 없었어요? –