在响应式设计中将元素居中

Question

I want to center an ad on my website. I tried using a div (Code Below). It centers properly on big screens, but when it comes to mobile devices, half of the ad is pushed out of the screen. Apologies if this has been asked before.

<div style="text-align: center;">
<div style="width: 640px; margin-top: 20px;">
 AD CODE COMES HERE</div>
</div>

Thanks in Advance

Answer 1

Because you set fixed width of your AD div. Try set it in percentage like width:60%.

Answer 2

Add max-width to the ad elemnt

<div style="text-align: center;">
<div style="width: 640px; margin-top: 20px;max-width:100%;">
 AD CODE COMES HERE</div>
</div>