Как мне вертикально и горизонтально центрировать изображение, когда я не знаю его размера? Я спросил этот вопрос, и кто-то предложил использовать таблицу. Это не первый раз, когда я слышал, что таблица может это сделать, но я пробовал без везения.
Поиск SO только дал мне результаты, когда я знаю размер изображения. Как это сделать с таблицей?
ПРИМЕЧАНИЕ: JavaScript/jQuery не является предпочтительным, но если есть решение с ним, я открыт для него.
Довольно легко, это формат всех моих изображений/контейнеров:
<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>
Вы можете установить явную высоту и высоту линии на вашем контейнере, чтобы центрировать изображение:
<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/
Далее следует метод таблицы. Он просто использует свойство valign (vertical-align):
<table>
<tbody>
<tr>
<td align="center" valign="middle">
<img src="someHeight.jpg" />
</td>
</tr>
</tbody>
</table>
Поскольку вы отметили этот вопрос "jQuery", я предоставлю ссылку на плагин jQuery Center, который также достигнет вертикального/горизонтального центрирования, используя позиционирование CSS и динамическое считывание размеров элементов: http://plugins.jquery.com/project/elementcenter
С таблицей:
<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';
});
НЕ ИСПОЛЬЗУЙТЕ ТАБЛИЦЫ. Ужасная практика, если вы не используете табличные данные.
Лучший способ сделать это - со следующим кодом.
<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>
Это будет работать, если оно не находится внутри каких-либо элементов без статического позиционирования. Все содержащие элементы должны быть статическим позиционированием, которое по умолчанию равно.
С помощью CSS нет простого способа вертикального выравнивания центра изображения. Хотя для выравнивания по центру по горизонтали вы можете использовать следующие
<img src="randomimage.jpg" style="margin: 0px auto;" />
Я бы не стал рекомендовать таблицу для создания изображения, поскольку это не очень хорошая практика. Таблицы должны использоваться только для табличных данных.
Существует некорректный способ сделать это. Просто покажите это изображение как блок с абсолютным позиционированием (родительский элемент должен иметь "позицию: относительный" ). Таким образом, вы можете играть с margin-left и margin-top с отрицательными значениями ~ = половину размеров изображения (соответственно ширины и высоты)
Если вы не возражаете против потери совместимости 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> .
Если вы не против потери 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%;
}
В принципе, вы должны иметь возможность создать таблицу в HTML, а стиль для тега td должен установить для атрибута text-align значение center и vertical-align для middle. И вы можете использовать другие атрибуты, такие как границы, отступы и т.д.
В итоге я делаю следующее. Протестировано с 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>
...