JB FACTORY

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

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