Центр div горизонтально с краем (CSS)

Как я могу центрировать горизонтально div с запасом?Центр div горизонтально с краем (CSS)

<div id="container"> 
    <div id="center_me"></div> 
</div> 


#container{ 
    position:relative; 
    width:100%; 
    height:400px; 
} 

#center_me{ 
    position:absolute; 
    width:100%; 
    margin:0 50px; 
    max-width:300px; 
    height:100%; 
    left:50%; 
    -webkit-transform:translateX(-50%); 
}

I can not use margin: 0 auto, так как я хочу, чтобы div имел запас; а левая: 50% translateX (-50%) техника не учитывает маржу. Я хочу сохранить маржу текучим (всегда центрируйте div и всегда сохраняйте один и тот же фиксированный запас) при изменении размера окна. Я пропустил что-то очень очевидное?

http://jsfiddle.net/R3yny/

Просто Css, спасибо.

источник

2014-03-06 Alvaro

Может быть полезно, чтобы объяснить, почему вы хотите сохранить маржу и/или то, что остальная часть вашей страницы является как. –

Итак, если вы хотите сохранить запас, вам нужно вычесть сохраненное левое поле из 'left'. Следовательно, если у вас есть «margin: 0 3%», то ваше левое становится 'left: 47%' – EmileKumfa

@ james-montagne У меня есть контейнер div, ширина которого: 100%, внутри него div, который содержит сетку (используя изотопный плагин). В сетке я могу указать водосточный желоб, но это не делает желоба в сетке div.Thats, почему я хочу иметь запас в этом div. – Alvaro

Можно ли, чтобы просто иметь запас на другой DIV, который сидит внутри #center_me?

<div id="container"> 
    <div id="center_me"> 
     <div id="i_have_the_margin"></div> 
    </div> 
</div>

Затем вы можете использовать margin:0 auto; на #center_me, как это - http://jsfiddle.net/nickg1/R3yny/3/ (Испытано в Opera)

источник

2014-03-06 04:01:38

Интересно, спасибо. Это было бы решением. Невозможно сохранить его только в двух дивизиях? – Alvaro

Насколько мне известно, но кто-то еще может это знать! Это именно то, как я это разрешу. ;) –

Давайте посмотрим, сможет ли кто-нибудь придумать это. Благодаря! – Alvaro

По определению, если ваш элемент смещен от центра с пометкой, он не может быть центрирован. Похоже, что вы хотите сделать это, удерживайте элемент в центральном месте на веб-странице с отзывчивым дизайном.

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

http://codepen.io/staypuftman/pen/oHGAF

CSS:

.hero-text-area-container { 
    background: #d6ffd1; 
    float: left; 
    margin: 0% 30%; 
    padding-top: 20em; 
    position: relative; 
    width: 50%; 
}

источник

2014-03-06 03:57:10 staypuftman

Я хотел бы, чтобы маржа была исправлена – Alvaro

Центр div горизонтально с краем (CSS)

ответ

Смежные вопросы