使用CSS将图片垂直和水平居中
[英]Center an Image vertically and horizontally using CSS
问题描述
How do I vertically and horizontally center an image when I do not know the size of it? 
不知道图像尺寸时如何垂直和水平居中？ I asked this question and 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. 仅当我知道图像的大小时，搜索SO才获得结果。 How do I do this with a table? 我该如何用桌子呢？
NOTE: JavaScript/jQuery is not preferred but if there's a solution with it I'm open to it. 注意：JavaScript / jQuery不是首选，但是如果有解决方案，我可以接受。
10 个解决方案
解决方案1
13 2010-03-19 16:23:19
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>
解决方案2
7 2010-03-19 15:24:52
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 Center Plugin的引用，该插件还通过使用CSS定位和元素尺寸的动态读取来实现垂直/水平居中： http : //plugins.jquery.com/project / elementcenter
解决方案3
5 2010-03-19 15:25:44
With a table: 带桌子：
<table height="400">
<tbody>
<tr>
<td valign="middle"><img /></td>
</tr>
</tbody>
</table>
The 400 is just something I picked. 400只是我选的东西。 You will need to define a height on table so it is taller than your image. 您将需要在桌子上定义一个高度，使其比图像高。
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. 如果您想尝试使用div和垃圾，那么jquery解决方案会很好，但是如果您不在乎，则不在乎。 You also have to rely on JS being turned on. 您还必须依靠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';
});
解决方案4
2 2010-03-19 16:42:36
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. 所有包含的元素都必须是静态定位，这仍然是默认设置。
解决方案5
1 2010-03-19 15:29:02
Using CSS there is no easy way to vertically align an image center. 使用CSS没有简单的方法可以垂直对齐图像中心。 Though to align it center horizontally you can use the following 虽然可以将其水平居中对齐，但可以使用以下命令
<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. 表仅应用于表格数据。
解决方案6
1 2010-03-19 15:34:57
There is some bad way to do it. 有一些不好的方法。 Just display this image as block with absolute positioning (parent element must have "position: relative"). 只需将该图像显示为具有绝对定位的块（父元素必须具有“ position：relative”）。 So you can play with margin-left and margin-top with negative values ~= a half of image sizes (respectively width and height) 因此，您可以使用负值〜=图像大小的一半（分别为宽度和高度）的左边距和边距顶部进行播放
解决方案7
1 2010-03-19 16:19:56
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>选择适当的高度/宽度。
解决方案8
1 2012-02-23 07:35:09
If you don't mind losing the img-tag, you can use background-image to center an image in a container block. 如果您不介意丢失img标签，则可以使用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%;
}
解决方案9
0 2010-03-19 15:27:10
Basically, you should be able to create a table in HTML, and the styling for the td tag should set the text-align attribute to center and the vertical-align attribute to middle . 基本上，您应该能够使用HTML创建表，并且td标签的样式应将text-align属性设置为center ，而vertical-align属性设置为middle 。 And, you can mess with other attributes, like borders, padding, etc... 而且，您可以将其他属性弄乱，例如边框，填充等。
解决方案10
0
I end up doing the below. 我最终做了下面的事情。 Tested with firefox, chrome, IE8 and opera. 经过Firefox，Chrome，IE8和Opera的测试。 All good. 都好。
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>
...
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.