Я (абсолютный новичок) хотел бы поместить изображение в коробку с небольшим отрывом. Я пробовал с дополнением и так, не работал. Тогда я пробовал это:позиционируйте картинку в середине
<div style="border:1px solid #CC6699; width:11em; height:5.5em;">
<img style="align:center; width:10em; height:5em;" src="path">
</div>
Но вместо этого изображение застревает в верхнем левом углу.
Пара способов сделать это:
Мой обычный, чтобы установить фоновое изображение вместо этого.
В вашем CSS:
div#img_container {
background: url(images/myImage.png) center center
}
В вашем HTML:
<div id="img_container"></div>
Или просто поставить некоторые отступы вокруг него в вашем CSS
img#myImage {
padding: 20px;
}
и HTML
<img id="myImage" src="images/myImage.png" />
Уровень CSS 2 не имеет свойства для центрирования предметов по вертикали. Вероятно, будет один уровень CSS 3. Но даже в CSS2 вы можете центрировать блоки по вертикали, объединяя несколько свойств. Хитрость заключается в том, чтобы указать, что внешний блок должен быть отформатирован как ячейка таблицы, потому что содержимое ячейки таблицы может быть центрировано по вертикали.
<div style="border:1px solid #CC6699; width:11em; height:5.5em;text-align:center;vertical-align:middle;display:table-cell;">
<img style="width:10em; height:5em;" src="path">
</div>
EDIT
Как следует rpflo, используя свойство фон-позиция особенно велика, если контейнер случается меньше, чем изображение. Просто не забудьте включить стиль «background-repeat: none», если вы не хотите, чтобы изображение было разбито.
Имейте в виду, что позже в вашем режиме жизни css: table-cell не будет хорошо играть с другими стилями (например, с плавающей точкой). –
Я согласен с rpflo - не очень хорошее решение. Столы для таблиц, а не для дизайна. – ChrisBenyamin
Попробуйте это:
<html>
<head>
<style>
#wrap {
width: 500px;
text-align: center;
}
.pic {
padding: 5px;
border: 2px solid #000;
}
</style>
</head>
<body>
<div id="wrap">
<img src="logo.gif" class="pic">
</div>
</body>
</html>
Используйте следующий небольшой плагин JQuery. Это центрирует изображение загрузки в середине указанного контейнера (по вертикали и по горизонтали): http://plugins.jquery.com/project/CenterImage
Демо-сайт: http://www.demosites.somee.com/demos/centerimage.html
Использования: Этот плагин позиционирует изображение загрузки по центру над указанным контейнером HTML (DIV, пролет ...).
В настоящее время доступны параметры конфигурации:
{ path: "../Images/ajax.gif", overlayColor: 'green', opacity: 0.2, zindex: 2000, isrelative:true }
Минимальная конфигурация для инициализации:
$('.4th').CenterImage({ path: "../Images/ajax-bar.gif" });
вызовов это для того, чтобы удалить изображение загрузки (и наложение)
$('.4th').CenterImage('remove');
Обратите внимание, что хотя это может быть рабочим решением, OP помечен вопросом с тегом CSS, а не с jQuery. – Artemix
первое предложение подходит только в том случае, если он говорит о каком-то декоративном образе; если это образ, который на самом деле является частью содержимого, не делайте этого. Второй, вероятно, лучше сделать с полями. –
Пошел с прокладкой, потому что он сказал, что попробовал это. Но вы правы, на обоих счетах. –