Как центрировать изображение?

Question

Я долгое время боролся с этой проблемой. Мои пейзажные изображения выглядели великолепно, но я не мог правильно подобрать изображения, ориентированные на портрет. Это код, который у меня был, и автоматическая маржа и отступы, казалось, не имели никакого эффекта, и изображение всегда выравнивалось слева от ползунка (родительский элемент).

.slider img#portrait { 
     min-height: 100%; 
     width: auto; 
     margin: 0 auto; 
     padding: 0 auto; 
     } 

Answer 1

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

Это теперь, что у меня есть, который хорошо работает:

.slider img#portrait { 
     height: auto; 
     width: 50%; 
     display: block; 
     float: none; 
     position: relative; 
     margin: 0 auto; 
     padding: 0 auto; 
     } 

Изображения по умолчанию отображаются в виде инлайн-блочных элементов. Таким образом, изменить это display: block;

Если есть float: left; того правило margin: auto; не будет иметь никакого эффекта либо, поэтому установите float: none;

Маржи авто не будет иметь никакого эффекта либо, если изображение не имеет установленную ширину, так width: 50%;

И не забудьте установить position: relative;

Если вы не изменяете отображение свойства изображений, то вы можете использовать: .slider {text-align: center;}. (Работает только, если применяются к родительскому элементу.)