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

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

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