Центр плавающих divs при изменении размера

Как центрировать неупорядоченный список таблиц, чтобы при изменении размера окна список по-прежнему был центрирован. Этот список перемещает следующую таблицу на следующую строку, когда она больше не подходит. Код:Центр плавающих divs при изменении размера

<div id="container"> 
    <ul id="project-list" class="child"> 
     <div class="the-crew_item"> 
      <li> 
       <a href="#/got/" class="proj-link"> 
        <table border="0" cellpadding="0" cellspacing="0" class="proj"> 
         <tr valign="top"> 
          <td> 
           <a href="#/got/" class="proj-link"><img src="images/got-thumb.jpg" border="0" /></a></td> 
         </tr> 
         <tr valign="top"> 
          <td class="project-desc" style="background: url(images/logo-hbo.png) no-repeat center center;"> 
           <h1>Game of Thrones</h1> 
           Epic Fan Event 
          </td> 
         </tr> 
        </table> 
       </a> 
      </li></div><div class="the-crew_item"> 
     <li> 
      <a href="#/airbnb/" class="proj-link"> 
       <table border="0" cellpadding="0" cellspacing="0" class="proj"> 
        <tr valign="top"> 
         <td> 
          <a href="#/airbnb/" class="proj-link"><img src="images/air-thumb.jpg" border="0" /></a></td> 
        </tr> 
        <tr valign="top"> 
         <td class="project-desc" style="background: url(images/logo-airbnb.png) no-repeat center center;"> 
          <h1>Airbnb</h1> 
          Hello LA 
         </td> 
        </tr> 
       </table> 
      </a> 
     </li> 
    </ul> 
     <p>&nbsp;</p> 
    </div> 
</div>

источник

2015-08-03 Jon Guy

Где ваш CSS? – Siyah

Я бы добавил свой css, но это усложняет ситуацию, и это неправильно. Мне нужна помощь, это css. Пожалуйста, простите меня за это. –

Мы не можем вам помочь только с HTML. – Siyah

Может быть, это поможет вам -

#container { 
 
    margin:0 auto; 
 
    width:300px; 
 
    background:red; 
 
}

<div id="container"> 
 
    <ul id="project-list" class="child"> 
 
     <div class="the-crew_item"> 
 
      <li> 
 
       <a href="#/got/" class="proj-link"> 
 
        <table border="0" cellpadding="0" cellspacing="0" class="proj"> 
 
         <tr valign="top"> 
 
          <td> 
 
           <a href="#/got/" class="proj-link"><img src="images/got-thumb.jpg" border="0" /></a></td> 
 
         </tr> 
 
         <tr valign="top"> 
 
          <td class="project-desc" style="background: url(images/logo-hbo.png) no-repeat center center;"> 
 
           <h1>Game of Thrones</h1> 
 
           Epic Fan Event 
 
          </td> 
 
         </tr> 
 
        </table> 
 
       </a> 
 
      </li></div><div class="the-crew_item"> 
 
     <li> 
 
      <a href="#/airbnb/" class="proj-link"> 
 
       <table border="0" cellpadding="0" cellspacing="0" class="proj"> 
 
        <tr valign="top"> 
 
         <td> 
 
          <a href="#/airbnb/" class="proj-link"><img src="images/air-thumb.jpg" border="0" /></a></td> 
 
        </tr> 
 
        <tr valign="top"> 
 
         <td class="project-desc" style="background: url(images/logo-airbnb.png) no-repeat center center;"> 
 
          <h1>Airbnb</h1> 
 
          Hello LA 
 
         </td> 
 
        </tr> 
 
       </table> 
 
      </a> 
 
     </li> 
 
    </ul> 
 
     <p>&nbsp;</p> 
 
    </div> 
 
</div>

источник

2015-08-03 15:16:23

Это хорошее начало, но мне нужен каждый стол (один для Game of Thrones, один для Airbnb), чтобы быть его отдельным отдельным элементом, чтобы я мог создать какую-то сетку. Поэтому, если окно будет изменено, оно сдвинет одну из таблиц, оставив все в центре, а не центрируется весь контейнер. –

Вы должны посмотреть в flexbox, например, если вы добавили отображение свойств: flex; обосновывать-содержание: центр; выравнивать-элементы: центр;» к вашему контейнеру div все его дети будут расположены в центре экрана. –

будет работать со всеми браузерами? Я бы хотел, чтобы моя страница работала и с старыми браузерами. –

Центр плавающих divs при изменении размера

ответ

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