使用 CSS 将图像垂直和水平居中
Posted
技术标签:
【中文标题】使用 CSS 将图像垂直和水平居中【英文标题】：Center an Image vertically and horizontally using CSS 【发布时间】：2011-01-29 12:33:41 【问题描述】：当我不知道图像的大小时，如何将图像垂直和水平居中？我问了this question，有人建议使用一张桌子。这不是我第一次听说桌子可以做到这一点，但我尝试过但没有运气。
只有当我知道图像的大小时，搜索 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/表格方法
表格方法如下。它只是利用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 >
<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';
);
【讨论】：
jQuery 代码有几个问题：一个是它需要在图像加载完成后运行（在文档加载后的某个时间），否则h & @987654325 @ 等于零。另一个是在最后一行，算术应该是((div_w-w)/2)，类似于top 计算。不确定left = '50%' 的用途，我只设置left 和top。我也觉得 CSS 在这样的事情上如此糟糕。【参考方案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="" />
</body>
只要它不在任何没有静态定位的元素内，它就会起作用。所有包含的元素都必须是静态定位，这是默认设置。
【讨论】：
简单一点：.centered position: absolute;最高：50%；宽度：100%；文本对齐：居中； 【参考方案5】：使用 CSS 没有简单的方法来垂直对齐图像中心。虽然要将其水平居中对齐，但您可以使用以下内容
<img src="randomimage.jpg" style="margin: 0px auto;" />
我不推荐使用表格来布置图像，因为这不再是一种很好的做法。表格只能用于表格数据。
【讨论】：
然而，鉴于没有优雅的方式将图像垂直居中，也许表格并不比其他方法差...？ 如果迫切需要，总是可以使用 javascript 来完成。使用桌子进行布局就像使用汽车在大海中航行。你可以让它工作，但它绝不适合目的。 （表格旨在用于存储表格数据。表格数据的示例包括公共汽车时刻表和运动成绩列表。存储表格数据的表格称为数据表。不幸的是，随着时间的推移，错误地使用表格变得很常见，因为页面布局。这种类型的表格称为布局表格。） - XHTML 规范【参考方案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>
只需为包含的
选择适当的高度/宽度。【讨论】：
我喜欢这个，但它似乎在除火狐之外的任何其他东西中都没有变化。 IE 8 可以，但无论出于何种原因，宽度都会被拉伸。我需要 chrome 支持，一切都应该在 Opera 上运行【参考方案8】：如果您不介意丢失 img-tag，您可以使用 background-image 将图像置于容器块的中心。
标记：
<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 和 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" /></a></td>
<td><a href="jdhfdjsfl"><img src="dfgdfgfdgf.gif" /></a></td>
...
【讨论】：
以上是关于使用 CSS 将图像垂直和水平居中的主要内容，如果未能解决你的问题，请参考以下文章