如何垂直对齐 AdSense 固定广告单元？答案

【问题标题】：How to vertically align an AdSense fixed ad unit?如何垂直对齐 AdSense 固定广告单元？
【发布时间】：2020-05-26 17:59:51
【问题描述】：

我正在使用 AdSense 的固定尺寸广告单元。

我将它放在我的容器div 中，它定义了广告的width 和height。

案例 1：有时它会做出如下明智的决定：

案例 2：但有时它会选择以更小的高度（比容器 div）呈现广告：

在这个CASE 2中，我怎样才能让它在我的容器中心垂直对齐？

这是我的广告代码：

<AdContainer_DIV>
  <ins className="adsbygoogle"
    style={{display:"inline-block", width:"100%", height: "100%"}}
    data-ad-client="XXXXXXXXXXXXXX"
    data-ad-slot="XXXXXXXXXXXXXX"
    data-adtest="on"
  >
  </ins>
</AdContainer_DIV>

问题在于，这是从该代码中渲染出来的：

> <AdContainer_DIV>      // THIS IS IN MY CODE
>>  <ins>                // THIS IS IN MY CODE (FROM THIS POINT, EVERYTHING BELOW IS CREATED BY ADSENSE)
>>>   <ins>              // THIS HAS 100% HEIGHT OF MY CONTAINER
>>>>    <ins>            // THIS HAS 100% HEIGHT OF MY CONTAINER
>>>>>     <iframe>       // THIS HAS 100% HEIGHT OF MY CONTAINER
>>>>>>      <iframe>     // THIS HAS 100% HEIGHT OF MY CONTAINER
>>>>>>>       <body>     // THIS HAS 100% HEIGHT OF MY CONTAINER
>>>>>>>>        <div>    // THIS THE ACTUAL AD WITH THE SMALLER HEIGHT

我不认为我可以用 CSS 做到这一点。必须有一些 AdSense 代码可以做到这一点。有没有人遇到过这个问题？

【问题讨论】：

标签： css ads adsense

【解决方案1】：

你可以这样使用：

<html>
<head>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha256-YLGeXaapI0/5IgZopewRJcFXomhRMlYYjugPLSyNjTY=" crossorigin="anonymous" />
</head>
<body>

<style>
.verticalhorizontal{
	display: table-cell;
	height: 150px;
	width: 300px;
	text-align: center;
	vertical-align: middle;
  
  border-style: solid;
}
</style>

<div class="container">
	<div class="verticalhorizontal">
		<div style="background-color: red;">Your Add Code</div>
	</div>
</div>


</body>

</html>

【讨论】：

我认为这行不通，因为它都在 iframe 中，除非它允许 CORS，否则您无法设置 iframe 的样式。我真的需要一些来自 AdSense 的程序化代码来完成这个技巧。但我不认为有一个。不过，谢谢。