javascript - 如果您不知道图像的大小，请在 Div 中垂直和水平居中图像？

Question

如果我有一个固定大小的容器 div 和一个未知大小的图像，我该如何水平和垂直居中？

• 使用纯CSS
• 如果 css 做不到就用 JQuery

This answer makes sense对于固定宽度图像，但不是可变宽度。

类似这种结构(我想到了 item renderers similar to these in the list ，但是左边的图像并不总是相同的大小:

<ul id="gallery">
    <li id="galleryItem1">
        <div class="imageContainer">
            <img src="gallery/image1"/>
        </div>
        <p>Some text to the right...</p>
        <!-- more stuff -->
    </li>
    <li id="galleryItem2">
    <!-- ... -->
</ul>

感谢您的帮助!

Answer 1

如果将图像设置为背景图像并以这种方式居中不是一个选项，则 jQuery 可以适应 the answer you linked for static images会去:

$(".fixed-div img.variable").each(function(){
  //get height and width (unitless) and divide by 2
  var hWide = ($(this).width())/2; //half the image's width
  var hTall = ($(this).height())/2; //half the image's height, etc.

  // attach negative and pixel for CSS rule
  hWide = '-' + hWide + 'px';
  hTall = '-' + hTall + 'px';

  $(this).addClass("js-fix").css({
    "margin-left" : hWide,
    "margin-top" : hTall
  });
});

假设一个 CSS 类定义为

.variable.js-fix {
  position:absolute;
  top:50%;
  left:50%;
}

固定宽度的 div 具有高度和 position:relative 声明。

[重要的 js 编辑:将 '.style()' 切换为 '.css()']