Переместите кучу divs CENTERED, сохраняя динамическую ширину и высоту - PullRequest
Новая
       22

Переместите кучу divs CENTERED, сохраняя динамическую ширину и высоту

1 голос
/ 01 июля 2011

У меня большой div.Он содержит кучу миниатюр.Мне бы хотелось, чтобы миниатюры внутри div были центрированы внутри div, а div центрировался на странице.Но я также хотел бы, чтобы ширина div была динамической, чтобы вы могли видеть все миниатюры для каждого разрешения по центру.Как я могу достичь этого?

вот что у меня так далеко: 

<div id="container">
    <div class="thumb"><img /></div>
    <div class="thumb"><img /></div>
    <div class="thumb"><img /></div>
    <div class="thumb"><img /></div>
    <div class="thumb"><img /></div>
    <div class="thumb"><img /></div>
</div>

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

#container{margin:auto;width:80%}
.thumb{padding:60px;float:left}

Есть идеи, как сделать что-то вроде float: center?

Ответы [ 2 ]

3 голосов
/ 01 июля 2011

Во-первых, вы не можете дать один и тот же идентификатор всем детям <div>; Это неверный HTML.

Я бы сделал что-то вроде этого: 

#container{margin:0 auto;width:80%;text-align:center}
#container div{padding:60px;display:inline}

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

Кроме того, вы можете просто изменить все <div> s на <span> s и удалить директиву display:inline CSS. Вы также можете полностью удалить идею <div> или <span> и просто применить padding непосредственно к тегу img.

РЕДАКТИРОВАТЬ : Видя комментарии, опубликованные к другому ответу, похоже, что мой ответ выше все равно не поможет Это поведение, которое вы пытаетесь достичь? http://jsfiddle.net/9KqQN/1

#container{margin:0 auto;width:80%;text-align:center}
#container span{display:inline-block;text-align:left}

<div id="container">
    <span>
        <img />
        <img />
        <img />
        <br />
        <img />
    </span>
</div>
1 голос
/ 01 июля 2011

Используйте display: inline-block для большого пальца. Это позволяет вам обращаться с ними, как с любым другим фрагментом текста, но сохраняет присущую им «квадратность» для определения размера: 

#container {margin: auto; width: 80%; text-align: center; }
.thumb { height: 100px; width: 100px; padding: 60px; display-inline-block; }
...