Центрирование изображения на HTML-странице

0

У меня есть html-страница, и я хочу наложить изображение в середине страницы, например, поставить метку на листе бумаги. Изображение имеет прозрачный фон. Я знаю, что могу использовать абсолютное позиционирование, но есть ли способ центрировать его с помощью css?

  • 0
    Абсолютное позиционирование - это CSS. Что вы пробовали?
  • 0
    Абсолютное позиционирование - единственное, что я знаю; но я обеспокоен изменением размеров экрана.
Теги:

3 ответа

0
Лучший ответ

HTML:

<img src="image.png" class="center" />

CSS:

.center
{
    position:absolute;
    left:50%;
    top:50%;
    width:220px; // image width
    height:40px; // image height
    margin-top: -20px; // -(height/2)
    margin-left: -110px; // -(width/2)
}

пример: http://jsfiddle.net/Bm5tA/

Поделиться
  • 0
    Это работает почти хорошо. Горизонтальное центрирование немного смещено.
0

Чтобы центрировать изображение, вы можете просто сделать это:

#watermark{
    display:block;
    margin:auto; //That will center it on all side
}

Если вы хотите только сосредоточить его горизонтально:

#watermark{
   display:block;
   margin-left:auto;
   margin-right:auto;
}
Поделиться
  • 0
    Звучит достаточно просто. Я дам ему попробовать.
  • 0
    Это не накладывалось на изображение на странице. Это центрирует, но также толкает другой элемент вниз.
Показать ещё 2 комментария
0

HTML

<div id="watermark">
<p>This is the test version.</p>
</div>

CSS

#watermark {
  color: #d0d0d0;
  font-size: 200pt;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: -1;
  left:-100px;
  top:-200px;
}

Демо- версия скрипта

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню