Question

当我不知道图像的大小时，如何垂直和水平居中图像？我问this question，有人建议使用表格。这不是我第一次听到桌子可以做到这一点，但我没试过就试过了。

当我知道图像的大小时，搜索SO只会得到我的结果。我如何用桌子做到这一点？

注意：JavaScript / jQuery不是首选，但如果有解决方案，我会接受它。

Answer 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>

Answer 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（垂直对齐）属性：

<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

Answer 3

用表格：

<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';
});

Answer 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="" width="100" height="100" alt="Centered Image"/>

</body>

只要不在没有静态定位的任何元素内部，这将起作用。所有包含元素必须是静态定位，无论如何都是默认定位。

Answer 5

使用CSS没有简单的方法来垂直对齐图像中心。虽然要将其水平对齐，但您可以使用以下

<img src="randomimage.jpg" style="margin: 0px auto;" />

我不会推荐用于布置图像的表格，因为它不再是一个非常好的练习。表格仅应用于表格数据。

Answer 6

有一些不好的方法。只需将此图像显示为具有绝对定位的块（父元素必须具有“position：relative”）。所以你可以使用margin-left和margin-top来看负值〜=图像大小的一半（分别是宽度和高度）

Answer 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>

只需为包含＆lt; div＆gt;。

选择合适的高度/宽度

Answer 8

如果您不介意丢失img-tag，可以使用背景图像将图像置于容器块中。

标记：

<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%;
}

Answer 9

基本上，您应该能够在HTML中创建表格，td标记的样式应将text-align属性设置为center和vertical-align属性到middle。而且，你可以搞乱其他属性，比如边框，填充等......

Answer 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" alt="dfgdfgfdgf.gif"/></a></td>
<td><a href="jdhfdjsfl"><img src="dfgdfgfdgf.gif" alt="dfgdfgfdgf.gif"/></a></td>
...

使用CSS垂直和水平居中图像

10 个答案:

CSS方法

HTML /表格方法

一个jQuery插件