CSS выравнивание изображений по горизонтали

Я новичок в css, и я пытаюсь согласовать мои изображения horziontally внутри элемента div.

Я попробовал float и display: inline, но все равно они выравниваются по вертикали.

#maincontainer {
   left : 50px;
 top : 80px;
 width : 300px;
 height : 100px;
 border : solid 2px #0f0f0f;
 position : absolute;
 overflow : scroll;

 }

 #maincontainer img {
    top : 10px;
    left : 10px;
    width : 80px;
    height : 80px;
    padding : 10px;
    position :relative; 
    float : left; 
   }

Пожалуйста, помогите и скажите мне, если я ошибаюсь.

Ответ 1

горизонтально выровнено

HTML

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

CSS

 #maincontainer {
     width : 300px;
     height : 100px;
     border : solid 2px #0f0f0f;
     }
     #maincontainer img {
        width : 80px;
        height : 80px;
        margin:0 auto;
        display:block;
        background:red;
    }

по вертикали и по горизонтали

HTML

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

CSS

 #maincontainer {
     width : 300px;
     height : 100px;
     border : solid 2px #0f0f0f;
     display:table;
     }
     #maincontainer div img {
        width : 80px;
        height : 80px;
        background:red;
        display:inline-block;
    }
    #maincontainer div{
     display:table-cell;
       text-align: center;
        vertical-align: middle;
    }

просто удалите фон: красный из img

Ответ 2

display: block;
margin-left: auto;
margin-right: auto

Ответ 3

Пока родительский контейнер достаточно широкий для изображений, они, естественно, будут сидеть бок о бок. Когда ряд изображений становится слишком большим для контейнера, изображения начнут обертываться до новой строки текста.

Кроме того, пробел (пробел, табуляция и символы новой строки) будет отображаться как текстовое пространство между двумя изображениями. Чтобы этого не произошло, убедитесь, что между тегами IMG нет пробелов.

Изображения могут быть вынуждены переполнять ширину родительского контейнера, установив CSS white-space: nowrap; в родительский элемент. Это может вызвать нежелательные эффекты, если контейнер становится слишком узким, но может также использоваться для создания горизонтальной полосы прокрутки, добавляя overflow: auto; к содержащему элементу.

Наконец, теги изображений могут иметь свойство CSS vertical-align. По умолчанию это vertical-align: baseline;. Это создает несколько пикселей белого пространства под изображением. Вы можете встретить это, установив vertical-align: top; для изображения в CSS.

См. эту скрипту для некоторых примеров с картинками.

Ответ 4

Если ваш div достаточно широкий, чтобы содержать все ваши изображения в одной строке, вы можете просто попробовать что-то вроде этого:

#maincontainer img {
float:left;
margin-right:10px;
}

посмотреть в прямом эфире: http://tinkerbin.com/mIBcXNcS Это базовый код, но он может варьироваться в зависимости от вашего html-кода....

Ответ 5

Привет теперь Перейдите в свою позицию в соответствии с этим

Теперь определите свою родительскую позицию relative и дайте дочернему элементу absolute

#maincontainer {
 position : relative;
 }

 #maincontainer img {
    position :absolute; 
   }

-----

Я думаю, что вы хотите этого

теперь измените некоторые properties вашего css

и теперь добавить margin-top и margin-left удалить top или left в родительском id maincontainer

как этот

#maincontainer {
 width : 300px;
 height : 100px;
  margin-top:80px;
  margin-left:50px;
 border : solid 2px #0f0f0f;
 position : relative;
 overflow : scroll;

 }

 #maincontainer img {
    top : 10px;
    left : 10px;
    width : 80px;
    height : 80px;
    padding : 10px;
    position :absolute; 
  vertical-align:top;
   }

Live Demo

Ответ 6

Вам нужно применить display:block; к элементу IMG для работы float. встроенные элементы не могут быть размещены.
В качестве альтернативы, определите IMG как display:inline-block;, но имейте в виду, что это не поддерживается старыми браузерами.
В качестве побочного примечания старайтесь избегать столько, сколько вы можете определить высоту в CSS (или использовать min-height). В отличие от ширины, высота многих элементов, особенно основного контейнера, должна быть гибкой.