Центрирование изображения по вертикали и горизонтали с использованием CSS
Я использовал
var enviar = document.getElementById("enviar");
enviar.type = "submit";
Просто потому, что все остальное не работало.
9 ответов
Довольно просто, это формат всех моих изображений / контейнеров:
<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>
С таблицей:
<table height="400">
<tbody>
<tr>
<td valign="middle"><img /></td>
</tr>
</tbody>
</table>
400 - это просто то, что я выбрал. Вам нужно будет определить высоту стола, чтобы он был выше вашего изображения.
Решение jquery было бы хорошо, если бы вы хотели попробовать использовать div и мусор, но если вам все равно, вам все равно. Вы также должны полагаться на то, что 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';
});
Метод 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 / таблицы
Метод таблицы следующий. Он просто использует свойство 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
НЕ ИСПОЛЬЗУЙТЕ ТАБЛИЦЫ. Ужасная практика, если вы не используете табличные данные.
Лучше всего это сделать с помощью следующего кода.
<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;" />
Я бы не рекомендовал использовать таблицу для размещения изображения, поскольку это уже не совсем хорошая практика. Таблицы следует использовать только для табличных данных.
В итоге я проделал следующее. Протестировано с Firefox, Chrome, IE8 и Opera. Все хорошо.
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>
...
Есть плохой способ сделать это. Просто отобразите это изображение как блок с абсолютным позиционированием (родительский элемент должен иметь «position: relative»). Таким образом, вы можете играть с 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>
Просто выберите подходящую высоту / ширину для содержащего
В принципе, вы должны быть в состоянии создать таблицу в HTML, и стиль для тега td должен установить атрибут text-align в center и атрибут vertical-align в middle. Кроме того, вы можете изменять другие атрибуты, такие как границы, отступы и т.д....