CSS Центр кучу изображений внутри div

0

Я пытался центрировать изображения в div на моей странице.

Соответствующий HTML:

<div class="imgblock">
        <div class="basket slide1"><a href="#">
          <div class="images">
            <div class="img-wrap"><img src="images/basket.jpg" alt="" align="center"/ </div>
            <div class="infos"></div>
          </div>
          </a></div>
        <div class="steak slide2"><a href="#">
          <div class="images">
            <div class="img-wrap"><img src="images/steak.jpg" alt="" /></div>
            <div class="infos"></div>
          </div>
          </a></div>
        <div class="col1-4 slide3"><a href="#">
          <div class="images">
            <div class="img-wrap"><img src="images/breakfast.jpg" alt="" /></div>
            <div class="infos"></div>
          </div>
          </a></div>
        <div class="fish slide4"><a href="#">
          <div class="images">
            <div class="img-wrap"><img src="images/fish.jpg" alt="" /></div>
            <div class="infos"></div>
          </div>
          </a></div>
</div>

Соответствующий CSS:

.imgblock {
width:940px;
text-align:center;
vertical-align:middle;
margin:0 10px;
}

В моем исследовании мне сказали добавить text-align: center и vertical-align: middle. Это не сработало, я также попробовал margin-left: auto и margin-right: auto.

Спасибо за вашу помощь.

Теги:

3 ответа

1
Лучший ответ

поскольку ваш образ плавает, вы можете уменьшить ширину .imgblock и использовать автоматическую маржу:

.imgblock {
width:830px;
margin:0 auto;;
}
  • 0
    Это будет правильно центрировать контейнер div. Если сами изображения не имеют одинаковую ширину, они будут «неровными».
  • 0
    я полагаю, что он использует систему сетки для определения размера изображения перед отправкой в Интернет, чтобы иметь размеры изображения, которые подходят друг другу :)
Показать ещё 1 комментарий
1

Как сказал @mdesdev, рекомендуемый способ сосредоточиться на элементах блока:

margin: 0 auto;

Это также касается ваших изображений. Я бы сделал что-то вроде этого (непроверенный):

.imgblock img{
    display: block;
    margin: 0 auto;
}

Вы, вероятно, могли бы обойтись и без окружающего div.

  • 0
    могу я спросить, какие divs вы думаете, я должен удалить?
0

можешь попробовать

.basket {
    margin: 0 10px 0 320px;
    width: 300px;
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню