Перемещение изображения вниз

Question

Я разрабатываю веб-страницу для изображений на карусели. Как перемещать изображение вниз в DIV или даже центрировать его по вертикали?

Вот мой CSS код:

.carousel .item { 
    height: 900px; 
    background-color: #777; 
} 
.carousel-inner > .item > img { 
    display: block; 
    margin-left: auto; 
    margin-right: auto 
} 

Вот URL на веб-страницу в вопросе, чтобы показать вам, что изображение слишком велико: http://www.canninginc.co.nz/canluciddream/screenshots.html

EDIT

Ok, Я отредактировал код, изменив:

margin-top: 50px; 

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

Answer 1

Прежде всего сделать положение относительно .item, а затем на CSS:

.carousel-inner > .item > img { 
    position:absolute; 
    top:25%; 
    left:25%; 
} 

Это будет центрировать изображение по вертикали

Answer 2

Поместите изображение в основной корпус, установите основной корпус в положение: относительное, затем установите изображение в положение: абсолютное; top: 0; left: 0;

Если вы не можете поместить изображение в основной корпус, добавьте отрицательный край края к основному корпусу.

Answer 3

Дайте пометку 130px к изображению, и это выглядит круто!

margin-top: 130px; 

Answer 4

Ваша проблема заключается не в том, что изображение находится слишком высоко - это фиксированный заголовок. Поэтому установите margin-top:50px вместо -80px для .myCarousel.

Answer 5

Причина, по которой изображение перемещается за панель навигации вверху, состоит в том, что положение навигационной панели установлено на фиксированное. Это удаляет его из остальной части страницы для целей стилизации, поскольку другие div/элементы не распознают его, когда они позиционируют себя. Если вы удалите позицию: зафиксировано; css на этом элементе, другие элементы будут располагаться относительно этого. Другой вариант заключается в том, чтобы добавить достаточное количество верхнего края к элементу изображения, чтобы поместить его ниже верхней панели по умолчанию, в зависимости от того, что вы предпочитаете.