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;
}

改变谷歌的高度加上1个按钮

2 个答案: