Google +1 버튼의 높이 변경

Question

Google +1 버튼 크기의 CSS (거품 카운터가있는 버튼)를 변경하는 방법을 알고 싶습니다.

기본값은 60 픽셀입니다하지만 난 70 픽셀

날

덕분에 이미지를 변경

<!-- Place this tag where you want the +1 button to render --> 
<g:plusone size="tall"></g:plusone> 

<!-- Place this render call where appropriate --> 
<script type="text/javascript"> 
    (function() { 
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; 
    po.src = 'https://apis.google.com/js/plusone.js'; 
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); 
    })(); 
</script> 

Answer 1

을 기쁘게 알고 그들이에 허용 한 것보다 다른 할 수없는하자가 필요 사용자 정의 할 페이지

그러나 <g:plusone을 둘러싸는 div (또는 5px 상단 5px 하단)의 상단 또는 하단에 10px의 여백을 추가 할 수 있습니다. 이렇게하면 70px의 고화질 영역에서 더 잘 맞을 수 있으며, 수직으로 정렬, 하단 정렬 또는 가운데 정렬 할 수 있습니다. 내보기 중심은 수직입니다. 나는 이것이 이전 게시물 알고

<div style="padding:5px 0;"> 
    <g:plusone size="tall"></g:plusone> 
</div> 

Answer 2

그러나, 나는이 iframe이의 부모 DIV에 변환을 사용하여 대부분의 최신 브라우저에서이 문제를 해결 얻을 수있었습니다. G +가 변형되는 것을 막기 위해 균일하게 변형해야하므로 요소가 너무 넓어지면 데이터 폭을 줄여야 할 수도 있습니다.

대부분 div가 인라인 블록으로 표시되기 때문에 변형 원점을 아래쪽 어딘가에 설정하면 대부분의 정렬 문제가 방지됩니다.

그런 다음 반대편에 여분의 여백을 추가하여 새로운 큰 크기를 오프셋하고 다른 항목이 겹치지 않게하고 페이지의 다른 요소와 수직으로 정렬되도록해야합니다.

/* ID provided by Google in my example matches this format */ 
div[id^="___plusone_"] { 
    /* Cross browser support for transform */ 
    -moz-transform: scale(1.5); 
    -webkit-transform: scale(1.5); 
    -o-transform: scale(1.5); 
    -ms-transform: scale(1.5); 
    transform: scale(1.5); 

    /* Cross browser support for transform origin */ 
    -moz-transform-origin: bottom left; 
    -webkit-transform-origin: bottom left; 
    -o-transform-origin: bottom left; 
    -ms-transform-origin: bottom left; 
    transform-origin: bottom left; 

    /* Margin right is used here since origin is set to bottom left */ 
    margin-right: 10px; 
}