поместите картинку посередине - PullRequest
Новая
       16

поместите картинку посередине

1 голос
/ 11 августа 2009

Я (абсолютный новичок) хотел бы поместить изображение в коробку с небольшим запасом. Я пробовал с padding и так, не работал. Тогда я попробовал это: 

<div style="border:1px solid #CC6699; width:11em; height:5.5em;">
    <img style="align:center; width:10em; height:5em;" src="path">
</div>

Но вместо этого изображение застревает в верхнем левом углу.

Ответы [ 4 ]

2 голосов
/ 11 августа 2009

Уровень 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-position особенно полезно, если контейнер оказывается меньше изображения. Просто не забудьте включить стиль «background-repeat: none», если вы не хотите, чтобы изображение было мозаичным.

2 голосов
/ 11 августа 2009

Попробуйте это: 

<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>
2 голосов
/ 11 августа 2009

Пара способов сделать это:

Обычно я вместо этого устанавливаю фоновое изображение.

В вашем 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" />
1 голос
/ 15 июня 2011

Используйте следующий небольшой плагин jQuery. Он центрирует загрузочное изображение в середине указанного контейнера (по вертикали и по горизонтали): http://plugins.jquery.com/project/CenterImage

Демонстрационный сайт: http://www.demosites.somee.com/demos/centerimage.html

Использование: этот плагин размещает загрузочное изображение централизованно над указанным html-контейнером (div, span ...).

В настоящее время доступны параметры конфигурации: 

{ path: "../Images/ajax.gif", overlayColor: 'green', opacity: 0.2, zindex: 2000, isrelative:true }

Минимальная конфигурация для инициализации: 

$('.4th').CenterImage({ path: "../Images/ajax-bar.gif" });

Позвоните, чтобы удалить загрузочное изображение (и оверлей) 

$('.4th').CenterImage('remove');
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...