Как оставить выровняемые видеоизображения adsense?

Я использую адаптивные объявления AdSense. По умолчанию текстовые объявления хорошо выравниваются слева, но по какой-то причине графические объявления имеют очень широкое левое поле. Я не могу избавиться от него, даже если я возьму самую простую страницу, т.е. Страницу с только объявлением на ней:

<!DOCTYPE html>
<html>
<head>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</head>
<body>
<!-- Responsive Ad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="xxx"
     data-ad-slot="xxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</body>
</html>

Текстовые объявления выравниваются по левому краю, например:

но графические объявления содержат некоторое большое левое поле, например:

Мой вопрос: как я могу убедиться, что графические объявления выровнены по левому краю?

Ответы

Ответ 1

Попробуйте положить его в контейнер и дать контейнеру max-width и, возможно, text-align: left.

<!DOCTYPE html>
<html>
<head>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
</head>
<body>
<!-- Responsive Ad -->
<div id="ad" style="width: 100%; max-width: 600px; text-align: left;">
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="xxx"
     data-ad-slot="xxx"
     data-ad-format="auto"></ins>
</div>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</body>
</html>

Трудно решить, не имея тестовой страницы, с которой вы можете попробовать.

Ответ 2

Попробуйте это - поместите свой код AdSense в div и создайте div следующим образом:

<div style="margin: 5px !important; float: left !important;"> 
    --Put your AdSense ad code here --
</div>

Ответ 3

Я видел вашу веб-страницу. И я применил следующий стиль

Попробуйте выполнить следующий css в файле

.container {
padding-left:0px;
margin-left:10px;
}

Сообщите мне, если это полезно

Ответ 4

Возможно, вы можете попытаться идентифицировать элемент DOM, созданный adsense с помощью инструментов разработчика chrome (или попробовать с классом в вашем теге ins), а в вашем коде добавить некоторый javascript для настройки AdSense, как вы хотите, например, вы можете сделать

document.getElementsByClassName('adsbygoogle').style.cssFloat = "left";

Если вы предпочитаете jquery, вы можете сделать что-то вроде

$('.adsbygoogle').css('float','left');

Ответ 5

Чтобы ограничить размер и выравнивание вашего объявления, он должен быть в контейнере, таком как абзац или div. Присвойте классу элемент контейнера, поместите максимальное ограничение на контейнер для адаптивного объявления и выровняйте содержимое слева, все в вашем CSS.

Ответ 6

Создайте таблицу с одной строкой и двумя столбцами (или div с display:table; приличием). Поместите свой код в первую ячейку. Я думаю, что только отдельные объявления в большом блоке сосредоточены. В этом примере показано, как я вижу это:

<table width="100%" height="90" border="0" align="center">
    <tbody>
    <tr>
        <td>
            <ins class="adsbygoogle"
            style="min-width:400px;max-width:970px;width:100%;height:90px;left:0;margin-left:0;"
            data-ad-client="xxx"
            data-ad-slot="xxx"></ins>
            <script>
            (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
        <td>
        <td>
        </td>
        </tr>
    </tbody>
</table>

Ответ 7

Если вы ищете результат, как показано на втором изображении с первого изображения, я могу думать только о нижеследующем решении:

    <!DOCTYPE html>
    <html>
       <head>
         <script async       src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
       </head>
       <body>
   <!-- Responsive Ad -->
          <div class = "adClass" style = "float:left;">
             <div id="ad" style="width: 100%; max-width: 600px; text-align: left;">
             <ins class="adsbygoogle"
               style="display:block"
               data-ad-client="xxx"
               data-ad-slot="xxx"
               data-ad-format="auto"></ins>
             </div>
           </div>
           <div class="yourContent" style = "float:right">
           <span>Your content here.</span>
           </div> 
          <script>
          (adsbygoogle = window.adsbygoogle || []).push({});
          </script>
         </body>
       </html>

Ответ 8

Кажется, это работает для меня, что вы думаете?

style="display:inline-block;max-width:728px;width:100%

Должен добавить, что я немного новичок в любом виде кодирования, поэтому, пожалуйста, поправьте меня, если я ошибаюсь.

Ответ 9

Единственное, что работает для меня, это:

<div class="admaxwidth">
    [your responsive ad code]
</div>

и в вашем .css:

.admaxwidth {max-width:728px;}

Ответ 10

Если вы используете wordpress, вы можете сделать это:

<div class="alignleft">
<! --- put your adsense code here -->
</div>

Работает для меня

Ответ 11

Я подтвердил, что оба этих решения работают:

Добавьте в свой код AdSense style="display:inline-block"

<ins class="adsbygoogle"
    data-ad-client="XXX"
    data-ad-slot="XXX"
    style="display:inline-block"
    data-ad-format="horizontal">
</ins>

Оборудуйте свой код AdSense классом CSS, который включает display:inline-block

.adTop {min-width:320px;min-height:50px;display:inline-block;}
@media(min-width:768px) {
    .adTop {min-width:728px;max-width:970px;min-height:90px;}
}

<div class="adTop">
    <ins class="adsbygoogle adTop"
        data-ad-client="XXX"
        data-ad-slot="XXX"
        data-ad-format="horizontal">
    </ins>
</div>