как горизонтально центрировать отзывчивый div?

Попытка отцентрировать элемент div, который будет содержать адаптивный код AdSense.

пример :

<div class="wrapper">
    <div class="adsense">adsense code here</div>
</div>

Я могу отцентрировать div, если введу точные размеры объявления. так что 728x90 - это максимум, который я хочу. На данный момент у меня есть img в качестве временного размещения, и он отлично работает. Проблема в том, что если я наберу точные px, то он не будет реагировать.

Любые идеи, пожалуйста?

Хорошо, это мой фактический код...

<section class="main-content">
            <div class="top-banner">
                <img src="img/ad_top.jpg">
            </div>
</section>

(img используется в качестве заполнителя для блокнота++)

.main-content {
    float: left;
    width: 75%;
}

.top-banner {
    margin:0 auto;
}

это просто помещает img слева, а не по центру.


html css responsive
person Andrew Barton    schedule 17.11.2016    source источник
comment
Возможный дубликат Как вы легко центрируете по горизонтали ‹div › с помощью CSS?   -  person Liam    schedule 17.11.2016
comment
Возможный дубликат [stackoverflow.com/questions/20142606/   -  person Bhavin Shah    schedule 17.11.2016
comment
Затем вы можете использовать max-width.   -  person Mohammad Usman    schedule 17.11.2016
comment
спасибо Усман, ты тоже понял   -  person Andrew Barton    schedule 17.11.2016

Ответы (2)


arrow_upward
1
arrow_downward

О чем ты говоришь? Горизонтальное центрирование выполняется с помощью margin: 0 auto; независимо от размера контейнера.

person junkfoodjunkie    schedule 17.11.2016
comment
Конечно, это работает. В этом весь смысл. Но если вы НЕ используете какую-либо настройку ширины, она будет иметь ширину 100%, что, вероятно, не то, что вам нужно. Следовательно, используйте маржу, но также используйте максимальную ширину (абсолютный максимум, который вы можете допустить) и минимальную ширину при наименьшем возможном размере объявления. И вы можете установить ширину во многих других измерениях, кроме px - person junkfoodjunkie; 17.11.2016

arrow_upward
0
arrow_downward

что вы думаете об этом?:

.wrapper{
  width:100vw;
  border:1px solid red;
}

.adsense{
  border:1px solid black;
  width:80%;
  margin:0 auto;
}

http://codepen.io/matoeil/pen/pNNRNZ

person Matoeil    schedule 17.11.2016
comment
Это лучше, но он по-прежнему не центрирует div, но я вижу, как он ведет себя так, как будто мне это тоже нужно... просто нужно повозиться с ним... дай мне посмотреть, могу ли я опубликовать свой фактический код, который у меня есть наверху - person Andrew Barton; 17.11.2016
comment
он центрирует div. добавить .adsense{ border:1px сплошной черный; ширина:80%; поле:0 авто; text-align:center } чтобы выровнять и текст - person Matoeil; 17.11.2016