Центрирование изображения с помощью CSS (горизонтальное и вертикальное)

Это основной вопрос, на который я не смог найти ответ.

Я хотел бы взять изображение логотипа, расположив его точно по центру экрана, сохраняя изображение в его первоначальном размере. Затем, прямо под этим изображением (- 5px вниз), поместите небольшую текстовую строку, где я выбираю его шрифт.

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

<html>
    <body>
        <img src="images/logoBlackBig.png" alt="W3Schools.com" >
    </body>
</html>
Источник

2 ответа

Решение

Улучшено - теперь с изменением размера изображения

Строительные блоки

  • Изображение и текст обернуты в div.

  • Div центрируется благодаря правильной комбинации position: absolute сверху, справа, снизу, слева и margin: auto,

  • Контейнер изменится до максимальной ширины и высоты с height: 100% а также width: 100%

  • max-height: 100% а также max-width: 100% гарантирует, что соотношение высоты изображения к ширине остается 1:1 при изменении размера.

IE 8 требует фиксированной высоты пикселей для контейнера.

Измените максимальную ширину и высоту, чтобы соответствовать изображению.

демонстрация 

* {
  margin: 0;
  padding: 0;
}
.centered {
  position: absolute;
  top: -4em;
  /* change top unit size to get desired vertical placement */
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  height: 100%; /*IE 8 Needs px height */
  width: 100%;
  max-height: 300px;
  max-width: 300px;
  min-width: 100px;
  text-align: center;
}
.centered img {
  max-height: 100%;
  max-width: 100%;
  min-width: 100px;
}
<div class="centered">
  <img src="http://www.placehold.it/300" />
  <h1>Green Eggs and Ham</h1>
</div>

Источник

Вы могли бы добиться этого с помощью преобразования CSS и absolute позиция как это:

JSFiddle - ДЕМО

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
<style>
* {margin: 0; padding: 0;}
.div {
    position: absolute;
    top: 50%;
    left: 50%;
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border: 1px solid #000;
    text-align: center;
}
.img {
    vertical-align:middle;
}
.p {
    margin: 0;
    position: absolute;
    bottom: 0;
    width: 100%;
    color: #000;
    font-size: 24px;
}
</style>
</head>
<body>
    <div class="div">
        <img class="img" src="http://media.tumblr.com/tumblr_m6cfbeVrUy1qegis6o1_400.gif" alt="W3Schools.com">
        <p class="p">MY TEXT</p>
    </div>
</body>
</html>

Источник
Другие вопросы по тегам