个人中心
gpt4 book ai didi

css - 如何垂直对齐 AdSense 固定广告单元？

转载 作者：行者123 更新时间：2023-12-04 16:15:23 26 4
gpt4 key购买 nike

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

我把它放在我的容器里 div ，它定义了 width和 height为广告。

案例 1:有时它会做出这样的明智决定:

enter image description here

案例 2:但有时它选择呈现高度(比容器 div)更小的广告:

enter image description here

在此 案例 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 标签才能完成这个技巧。有没有人遇到过这个问题？

最佳答案

你可以使用这样的东西:

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

关于css - 如何垂直对齐 AdSense 固定广告单元？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60166977/

26 4 0
文章推荐： vue.js - 使用 Vue.js 添加自动广告
文章推荐： logical-operators - 逻辑运算符AND(＆)的反函数
文章推荐： 甘特图的 JSF 组件
文章推荐： adsense - 如何在 SPA(单页应用程序)的路由更改时调用 AdSense 自动广告？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com