Javascript 使用 CSS 垂直和水平居中图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2478434/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Center an Image vertically and horizontally using CSS
提问by
How do I vertically and horizontally center an image when I do not know the size of it? I asked this questionand someone suggested using a table. This isn't the first time I heard a table can do it but I tried without luck.
当我不知道图像的大小时，如何垂直和水平地居中图像？我问了这个问题，有人建议使用表格。这不是我第一次听说桌子可以做到这一点，但我没有运气就尝试过。
Searching SO only got me results when I do know the size of the image. How do I do this with a table?
当我知道图像的大小时，搜索 SO 只会得到我的结果。我如何用桌子做到这一点？
NOTE: JavaScript/jQuery is not preferred but if there's a solution with it I'm open to it.
注意：JavaScript/jQuery 不是首选，但如果有解决方案，我愿意接受。
回答by Bryan A
Pretty easy, this is the format of all my images/containers:
很简单，这是我所有图像/容器的格式：
<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>
回答by Sampson
The CSS Method
CSS 方法
You can set an explicit height and line-height on your container to center an image:
您可以在容器上设置明确的高度和行高以将图像居中：
<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>
See it in action: http://jsfiddle.net/jonathansampson/qN3nm/
看到它在行动：http: //jsfiddle.net/jonathansampson/qN3nm/
The HTML/Table Method
HTML/表格方法
The table method follows. It's merely utilizing the valign(vertical-align) property:
表格方法如下。它只是利用valign(vertical-align) 属性：
<table>
<tbody>
<tr>
<td align="center" valign="middle">
<img src="someHeight.jpg" />
</td>
</tr>
</tbody>
</table>
A jQuery Plugin
一个 jQuery 插件
Since you tagged this question "jQuery," I'll provide a reference to the jQuery Center Plugin that also achieves vertical/horizontal centering by using CSS positioning and dynamic reading of an elements dimensions: http://plugins.jquery.com/project/elementcenter
由于您将此问题标记为“jQuery”，因此我将提供对 jQuery 中心插件的参考，该插件还通过使用 CSS 定位和元素尺寸的动态读取来实现垂直/水平居中：http: //plugins.jquery.com/project /元素中心
回答by Jage
With a table:
带表：
<table height="400">
<tbody>
<tr>
<td valign="middle"><img /></td>
</tr>
</tbody>
</table>
The 400 is just something I picked. You will need to define a height on table so it is taller than your image.
400 只是我选择的东西。您需要在桌子上定义一个高度，使其比您的图像高。
A jquery solution would be good if you wanted to try and use divs and junk, but if you don't care you don't care. You also have to rely on JS being turned on.
如果您想尝试使用 div 和垃圾，jquery 解决方案会很好，但如果您不在乎，则不在乎。你还必须依赖 JS 被打开。
HTML:
HTML：
<div id="imgContainer" style="position:relative;">
<img style="position:absolute;" />
</div>
JS:
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';
});
回答by KTastrophy
DON'T USE TABLES. Terrible practice unless your using tabular data.
不要使用表格。除非您使用表格数据，否则糟糕的做法。
The best way to do this is with the following code.
最好的方法是使用以下代码。
<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>
This will work as long as it is not inside any elements without static positioning. All containing elements must be static positioning which is the default anyway.
只要它不在任何没有静态定位的元素内，这就会起作用。所有包含元素都必须是静态定位，这是默认设置。
回答by GaryDevenay
Using CSS there is no easy way to vertically align an image center. Though to align it center horizontally you can use the following
使用 CSS 没有简单的方法来垂直对齐图像中心。虽然要将其水平居中对齐，您可以使用以下内容
<img src="randomimage.jpg" style="margin: 0px auto;" />
I would not reccommend a table for laying out an image as it is not really good practice anymore. Tables should only be used for tabular data.
我不会推荐一张桌子来布置图像，因为它不再是一个很好的做法。表格应该只用于表格数据。
回答by Jurius
There is some bad way to do it. Just display this image as block with absolute positioning (parent element must have "position: relative"). So you can play with margin-left and margin-top with negative values ~= a half of image sizes (respectively width and height)
有一些不好的方法来做到这一点。只需将此图像显示为具有绝对定位的块（父元素必须具有“位置：相对”）。因此，您可以使用负值 ~= 图像大小的一半（分别为宽度和高度）使用 margin-left 和 margin-top
回答by Marc B
If you don't mind losing IE compatibility (IE7 and older don't support this at all), you can use some CSS to simulate tables, without ever using one:
如果您不介意失去 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>
Just pick appropriate height/width for the containing <div>.
只需为包含的 <div> 选择合适的高度/宽度。
回答by Ivar
If you don't mind losing the img-tag, you can use background-image to center an image in a container block.
如果您不介意丢失 img-tag，您可以使用 background-image 将图像居中放置在容器块中。
markup:
标记：
<div class="imagebox" style="background-image: url(theimage.png);"></div>
style:
风格：
.imagebox
{
width: 500px;
height: 500px;
border: solid 1px black;
background-repeat: no-repeat;
background-position: 50% 50%;
}
回答by Ivar
I end up doing the below. Tested with firefox, chrome, IE8 and opera. All good.
我最终做了下面的事情。使用 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
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>
...
回答by kafuchau
Basically, you should be able to create a table in HTML, and the styling for the tdtag should set the text-alignattribute to centerand the vertical-alignattribute to middle. And, you can mess with other attributes, like borders, padding, etc...
基本上，您应该能够在 HTML 中创建一个表格，并且td标签的样式应该将text-align属性设置为center并将vertical-align属性设置为middle。而且，你可以弄乱其他属性，比如边框、填充等......
