애드센스 강좌 / 고정형 광고 / 가운데 정렬하는 방법

크기가 고정된 애드센스 광고는 보통 왼쪽 정렬로 광고가 출력됩니다. 그 광고를 가운데 정렬하는 방법을 알아보겠습니다.

방법 1

고정 크기 광고인 300x250 크기의 애드센스 광고 코드는 다음처럼 생겼습니다.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- 300x250 10 --> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-xxx" data-ad-slot="xxx"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>

style 속성에 display:inline-block이 있으면, <div>와 </div>로 광고 코드를 감싸고, style 속성에 text-align: center;를 추가하면, 광고가 가운데에 출력됩니다.

즉, 광고 코드 위에

<div style="text-align: center;">

를 추가하고, 광고 코드 밑에

</div>

를 추가하는 것입니다.

<div style="text-align: center;"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- 300x250 10 --> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px;" data-ad-client="ca-pub-xxx" data-ad-slot="xxx"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div>

방법 2

class 속성에 asd를 추가하고, style 속성에 display:inline-block을 display:block으로 바꿉니다. 그리고 광고 코드 위에

<style> .asd { margin-left: auto; margin-right: auto; } </style>

를 추가합니다. 즉, 다음처럼 만들면 광고가 가운데에 출력됩니다.

<style> .asd { margin-left: auto; margin-right: auto; } </style> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- 300x250 10 --> <ins class="adsbygoogle asd" style="display:block;width:300px;height:250px" data-ad-client="ca-pub-xxx" data-ad-slot="xxx"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>