Как выровнять фиксированный рекламный блок AdSense по вертикали? - PullRequest
Новая
       39

Как выровнять фиксированный рекламный блок AdSense по вертикали?

1 голос
/ 11 февраля 2020

Я использую рекламный блок фиксированного размера от AdSense.

Я помещаю его в свой контейнер div, который определяет width и height для рекламы.

ПРИМЕР 1: Иногда он принимает умные решения, как это:

enter image description here

ПРИМЕР 2: Но иногда это выбирает визуализацию объявления с меньшей высотой (чем у контейнера):

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, который должен сделать этот трюк. Кто-нибудь сталкивался с этой проблемой раньше?

1 Ответ

0 голосов
/ 12 февраля 2020

Вы можете использовать что-то вроде этого: 

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