当我不知道图像的大小时，如何垂直和水平居中图像？我问了这个问题，有人建议使用表格。这不是我第一次听说桌子可以做到这一点，但我没有运气就试过了。
当我知道图像的大小时，搜索 SO 只会得到我的结果。我如何用桌子做到这一点？
注意：JavaScript/jQuery 不是首选，但如果有解决方案，我愿意接受。
使用 CSS 垂直和水平居中图像
IT技术
javascript
jquery
html
css
image
2021-03-11 03:46:39
6个回答
很简单，这是我所有图像/容器的格式：
<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>
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 中心插件的参考，该插件还通过使用 CSS 定位和元素尺寸的动态读取来实现垂直/水平居中：http : //plugins.jquery.com/project /元素中心
带表：
<table height="400">
<tbody>
<tr>
<td valign="middle"><img /></td>
</tr>
</tbody>
</table>
400 只是我选择的东西。您需要在桌子上定义一个高度，使其比您的图像高。
如果您想尝试使用 div 和垃圾，jquery 解决方案会很好，但如果您不在乎，则不在乎。你还必须依赖 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;" />
我不会推荐一张用于布置图像的表格，因为这不再是一种很好的做法。表格应该只用于表格数据。