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

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

Поиск SO только дал мне результаты, когда я знаю размер изображения. Как это сделать с таблицей?

ПРИМЕЧАНИЕ: JavaScript/jQuery не является предпочтительным, но если есть решение с ним, я открыт для него.

Ответы

Ответ 1

Довольно легко, это формат всех моих изображений/контейнеров:

<div class="photo"><img /></div>
<style type="text/css">
  div.photo { height: 100px; line-height: 100px;text-align:center; }
  div.photo img { vertical-align:middle;}
</style>

Ответ 2

Метод CSS

Вы можете установить явную высоту и высоту линии на вашем контейнере, чтобы центрировать изображение:

<div id="container">
    <img src="http://placekitten.com/200/200" />
</div>

<style>
    #container { height: 600px; line-height: 600px; text-align: center }
    #container img { vertical-align: middle }
</style>

Смотрите в действии: http://jsfiddle.net/jonathansampson/qN3nm/

Метод HTML/Table

Далее следует метод таблицы. Он просто использует свойство valign (vertical-align):

<table>
  <tbody>
    <tr>
      <td align="center" valign="middle">
        <img src="someHeight.jpg" />
      </td>
    </tr>
  </tbody>
</table>

Плагин jQuery

Поскольку вы отметили этот вопрос "jQuery", я предоставлю ссылку на плагин jQuery Center, который также достигнет вертикального/горизонтального центрирования, используя позиционирование CSS и динамическое считывание размеров элементов: http://plugins.jquery.com/project/elementcenter

Ответ 3

С таблицей:

<table height="400">
    <tbody>
        <tr>
            <td valign="middle"><img /></td>
        </tr>
    </tbody>
</table>

400 - это то, что я выбрал. Вам нужно будет определить высоту стола, чтобы она была выше вашего изображения.

Решение jquery было бы хорошо, если бы вы хотели попробовать использовать divs и мусор, но если вам все равно, вам все равно. Вы также должны полагаться на включение JS.

HTML:

<div id="imgContainer" style="position:relative;">
    <img style="position:absolute;" />
</div>

JS:

$('#imgContainer > img').each(function(){
    //get img dimensions
    var h = $(this).height();
    var w = $(this).width();

    //get div dimensions
    var div_h =$('#imgContainer').height();
    var div_w =$('#imgContainer').width();

    //set img position
    this.style.top = Math.round((div_h - h) / 2) + 'px';
    this.style.left = '50%';
    this.style.marginLeft = Math.round(w/2) + 'px';
});

Ответ 4

НЕ ИСПОЛЬЗУЙТЕ ТАБЛИЦЫ. Ужасная практика, если вы не используете табличные данные.

Лучший способ сделать это - со следующим кодом.

<html>
<head>
    <title></title>
    <style media="screen">
    .centered {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -50px 0 0 -50px;*/
    }

    </style>
</head>
<body>

<img class="centered" src="" width="100" height="100" alt="Centered Image"/>

</body>

Это будет работать, если оно не находится внутри каких-либо элементов без статического позиционирования. Все содержащие элементы должны быть статическим позиционированием, которое по умолчанию равно.

Ответ 5

С помощью CSS нет простого способа вертикального выравнивания центра изображения. Хотя для выравнивания по центру по горизонтали вы можете использовать следующие

<img src="randomimage.jpg" style="margin: 0px auto;" />

Я бы не стал рекомендовать таблицу для создания изображения, поскольку это не очень хорошая практика. Таблицы должны использоваться только для табличных данных.

Ответ 6

Существует некорректный способ сделать это. Просто покажите это изображение как блок с абсолютным позиционированием (родительский элемент должен иметь "позицию: относительный" ). Таким образом, вы можете играть с margin-left и margin-top с отрицательными значениями ~ = половину размеров изображения (соответственно ширины и высоты)

Ответ 7

Если вы не возражаете против потери совместимости IE (IE7 и более старые вообще не поддерживают это), вы можете использовать некоторый CSS для имитации таблиц, не используя один:

<div style="display: table; height: 500px; width: 500px;">
   <img src="pic.jpg" style="display: table-cell; vertical-align:middle; margin: 0 auto; text-align: center">
</div>

Просто выберите подходящую высоту/ширину для содержащего <div> .

Ответ 8

Если вы не против потери img-тега, вы можете использовать фоновое изображение для центрирования изображения в контейнерном блоке.

Разметка:

<div class="imagebox" style="background-image: url(theimage.png);"></div>

стиль:

.imagebox
{
  width: 500px;
  height: 500px;
  border: solid 1px black;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

Ответ 9

В принципе, вы должны иметь возможность создать таблицу в HTML, а стиль для тега td должен установить для атрибута text-align значение center и vertical-align для middle. И вы можете использовать другие атрибуты, такие как границы, отступы и т.д.

Ответ 10

В итоге я делаю следующее. Протестировано с firefox, chrome, IE8 и опера. Все хорошо.

table.NAME
{
    background: green; //test color
    text-align: center;
    vertical-align:middle;
}
table.NAME tr td
{
    width: 150px;
    height: 150px;
}

HTML

<table class="NAME"><tr>
<td><a href="jdhfdjsfl"><img src="dfgdfgfdgf.gif" alt="dfgdfgfdgf.gif"/></a></td>
<td><a href="jdhfdjsfl"><img src="dfgdfgfdgf.gif" alt="dfgdfgfdgf.gif"/></a></td>
...