更改谷歌加1按钮的高度答案

【问题标题】：change height of google plus 1 button更改谷歌加1按钮的高度
【发布时间】：2012-01-26 16:18:11
【问题描述】：

我想知道如何更改 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>

【问题讨论】：

标签： google-plus-one

【解决方案1】：

除了页面上允许自定义的内容外，无法更改图像。

但是您可以在围绕<g:plusone 的 div 的顶部或底部（或 5px 顶部 5px 底部）添加 10px 的内边距。这样，它会更适合您的 70px 高内容区域，并且您可以顶部对齐、底部对齐或垂直居中。我的示例中心是垂直的。

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

【讨论】：

【解决方案2】：

我知道这是一篇旧帖子，但是，通过对 iFrame 的父 div 使用转换，我能够在大多数现代浏览器中解决这个问题。显然，你需要对它进行统一变换，以防止 G+ 变形，因此如果元素变得太宽，可能需要减小数据宽度。

由于大多数情况下 div 将显示为 inline-block，因此将变换原点设置在底部的某处可以防止大多数对齐问题。

然后你需要做的就是在对面添加一些额外的边距以抵消它新的大尺寸，防止它与其他项目重叠，并确保它与页面上的其他元素垂直对齐。

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

【讨论】：