Html img center: How To Center an Image

html — Как выровнять img по центру, завернутый в тег SPAN?

спросил 10 лет, 8 месяцев назад

Изменено 3 года, 7 месяцев назад

Просмотрено 38 тысяч раз

Я пытаюсь выровнять по центру изображение, заключенное в , но у меня возникают проблемы с этим. Я загрузил свой CSS и HTML в jsfiddle: http://jsfiddle.net/7nHhu/1/

Я пытаюсь выровнять изображение по центру с содержимым в «блочном» стиле (т. е. весь текст над и под ним, без переноса влево или вправо)

Любая помощь будет принята с благодарностью.

 .imgframe {
граница: 1px сплошная #EAEAEA;
отображение: встроенный блок;
поле: 8px;
}
.imgframe изображение {
граница: 1px сплошная #FFFFFF;
маржа: 0;
фон: #F6F6F6;
отступ: 8px;
-moz-box-shadow: 2px 2px 5px #CCCCCC;
-webkit-box-shadow: 2px 2px 5px #CCCCCC;
}
  tinypic.com/31368e9.jpg" />​
 

• HTML
• CSS

1

Я думаю, что более уместно использовать text-align для центрирования текста, а не изображений. Вы можете центрировать изображение, установив левое и правое поля автоматически.

 изображение {
    дисплей: блок;
    поле слева: авто;
    поле справа: авто;
    высота: авто;
    отступы сверху: 10px; //margin-top не работает
}
 

Demo

Просто создайте элемент блочного уровня оболочки изображения и выравнивание текста: по центру; это.

FIDDLE

или при необходимости оберните его в другой элемент;

FIDDLE

В .imgframe добавьте ширину: 100%;

2

Учитывая ваши требования, чтобы сохранить элемент .imgframe в строке, чтобы он не занимал всю ширину включающего элемента и работал без добавления элементов обертки в вашу разметку, работает следующее:

 body {
    выравнивание текста: по центру;
}
тело р {
    выравнивание текста: по левому краю;
}
 

Демонстрация JS Fiddle.

Возможно, это было бы менее навязчиво, если бы элементы из Fiddle были заключены в конкретный целевой элемент; а не тело

, поскольку описанный выше метод требует, чтобы вы сбросили text-align для всех элементов, содержащихся в теле . Итак, лично я бы использовал:

 

    
...
    <диапазон>
        
    
    
...

 

И:

 #contentWrapper {
    выравнивание текста: по центру;
}
#contentWrapper р {
    выравнивание текста: по левому краю;
}
 

Просто для того, чтобы свести к минимуму объем работы, необходимой для последующей уборки.

 диапазон {позиция: абсолютная; верх:0; слева: 0; ширина: 100%; выравнивание текста: по центру;}
изображение {ширина: ширина вашего изображения; высота: ширина: yourimageheigth}
 

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

html — Выровнять изображение по центру без пробела

спросил 5 лет, 11 месяцев назад

Изменено 5 лет, 11 месяцев назад

Просмотрено 609 раз

Я хочу выровнять логотип по центру панели навигации страницы.

Это мой код:

 

    <ул>
        

           
        
    

 

Я нашел это решение в Интернете:

 #center img{
    дисплей: блок;
    маржа: авто;
}
 

Но проблема в том, что, используя свойство display:block, я получаю пространство вокруг изображения, которое увеличивает высоту моей панели навигации, и я не могу удалить это пространство.

Будем признательны за помощь.

• HTML
• CSS

10

Проверьте эту скрипку. https://jsfiddle.net/5huhpxuk/

 #center img {
  дисплей: блок;
  маржа: авто;
}

.nav {
  цвет фона: черный;
  высота строки: 0%
} 

 <дел>
  <ул>
    

       png">
    
  

 /*# центр изображения {
  дисплей: блок;
  маржа: авто;
}*/

# центр {
    выравнивание текста: по центру;
}

ул {
    стиль списка: нет;
    маржа: авто;
    отступ: 0px;
}

.nav {
    фон: #ддд;
    нижняя граница: 1px сплошная #bebebe;
} 

 <дел>
  <ул>