12

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

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

这个答案对固定宽度的图像有意义，但对可变图像没有意义。

类似这种结构的东西（我想到的项目渲染器类似于列表中的这些，但左侧的图像并不总是相同的大小：

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

谢谢您的帮助！

4

12 回答 12

6

如果将图像设置为背景图像并以这种方式居中不是一个选项，则用于调整您为静态图像链接的答案的 jQuery 将变为：

$(".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()']

于 2010-03-13T04:42:19.423 回答
5

你可以用background-position它。

#your_div {
    background-position: center center;
    background-image: url('your_image.png');
}
于 2010-03-13T02:09:18.663 回答
5

跨浏览器解决方案

<style>
  .border {border: 1px solid black;} 
</style>
<div class="border" style="display: table; height: 400px; width: 400px; #position: relative; overflow: hidden;">
  <div class="border" style=" #position: absolute; #top: 50%;display: table-cell; text-align: center; vertical-align: middle;">
    <div class="border" style="width: 400px; #position: relative; #top: -50%">
      <img src="smurf.jpg" alt="" />
  </div>
</div>

垂直div定位的原始解决方案

于 2010-03-13T06:29:04.100 回答
3

查看我的解决方案：http ://codepen.io/petethepig/pen/dvFsA

它是用纯 CSS 编写的，没有任何 JS 代码。它可以处理任何大小和任何方向的图像。

将另一个 div 添加到您的 HTML 代码中：

<div class="imageContainer">
    <img src="gallery/image1"/>
</div>

CSS 代码：

.imageContainer {
  font-size: 0;
  text-align: center;
  width: 200px;  /* Container's dimensions */
  height: 150px;
}
img {
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
  max-width: 100%;
}
.imageContainer:before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 150px;
}

更新：我摆脱了这个<div class="trick"></div>元素以支持:beforeCSS 选择器

于 2013-06-28T20:42:06.373 回答
2

如果您不知道图像大小，但您已将图片上传到容器大小旁边（可能是更大或更小的图像），那么这篇文章可能会很有用。对我有用的是下一个代码：

<a class="linkPic" href="#">
    <img src="images/img1.jpg" alt=""/>
</a>
<a class="linkPic" href="#">
    <img src="images/img2.jpg" alt=""/>
</a>
<a class="linkPic" href="#">
    <img src="images/img3.jpg" alt=""/>
</a>

在 .css 文件中，您有以下规则：

a.linkPic{
    position:relative;
    display: block;
    width: 200px; height:180px; overflow:hidden;
}
a.linkPic img{
    position:absolute;
}

您会注意到 a.linkPic 中有一个图像标签，因此首先您必须将其设置为“position:relative”以包含“img”绝对元素。使图片居中而没有问题的诀窍是一点 jQuery 代码。按照评论来了解发生了什么（一些行取自本页的 Vladimir Maryasov 帖子​​）：

$("a.linkPic img").each(function() {
    // Get container size
    var wrapW = $("a.linkPic").width();
    var wrapH = $("a.linkPic").height();

    // Get image sizes
    var imgW = $(this).width();
    var imgH = $(this).height();

    // Compare if image is bigger than container
    // If image is bigger, we have to adjust positions
    // and if dont, we have to center it inside the container
    if (imgW > wrapW && imgH > wrapH) 
    {
        // Centrar por medio de cálculos
        var moveX = (imgW - wrapW)/2;
        var moveY = (imgH - wrapH)/2;

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

        $(this).addClass("imgCenterInDiv").css({
            "margin-left" : hWide,
            "margin-top" : hTall
        });
    } else {
        $(this).addClass("imgCenterInDiv").css({
            "left" : 0,
            "right" : 0,
            "top" : 0,
            "bottom" : 0,
            "margin" : "auto",
        });
    }//if
});

在此之后，a.linkPic 容器中的所有图片都将完全居中放置。我希望这篇文章对某人有用！

于 2016-11-15T00:33:44.827 回答
1

Using display: table-cell trick for div

Working correctly in: Firefox, Safari, Opera, Chrome, IE8

CSS example:

div {
  width: 300px;
  height: 300px;
  border: 1px solid black;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
img {
  display: inline;
}

HTML example:

<div>
  <span></span>
  <img src="" alt="" />
</div>

Firefox example

于 2010-03-13T05:10:17.180 回答
1

这是一个 PHP 变体。

这是很多代码，但就像一个魅力。在阅读了有关此主题的几篇文章后，我想出了它。它将各种尺寸的图像定位在固定宽度和高度的 div 中

你的 CSS 应该包含这个：

.friend_photo_cropped{
    overflow: hidden;
    height: 75px;
    width: 75px;
    position:relative;
}
.friend_photo_cropped img{
    position:relative;
}

你的代码应该是这样的：

<?php
list($width, $height) = getimagesize($yourImage);
if ($width>=$height)
{
        $h = '75';
        $w = round((75/$height)*$width);
}
else
{
        $w = '75';
        $h = round((75/$width)*$height);
}
$top = -round(($h-75)/2);
$left = -round(($w-75)/2);
echo '<td height="75">';
echo '<div class="friend_photo_cropped">';
        echo '<img src="'.$yourImage.'" width="'.$w.'" height="'.$h.'" style="top:'.$top.'px;left:'.$left.'px;">';
echo '</div>';
echo '</td>';
?>
于 2012-10-21T13:43:42.203 回答
1

你也可以这样对齐。至少我就是这样做的，它对我有用。可能不是最好的方法。我在固定大小的 div 中有一堆不同大小的徽标。

首先获取图像的尺寸。然后根据您的 div 的高度，您可以确定上边距应该是多少。这将使其垂直居中。只需更改 $IMG_URL 和 $DIVHEIGHT 值。

list($width, $height, $type, $attr) = getimagesize($IMG_URL);
$margin-top = number_format(($DIVHEIGHT - $height) / 2, 0);

例如。 

<div style="margin-top:".$margin-top."px\"><img src="" /> </div>
于 2012-01-07T18:14:46.463 回答
0

对 html 标签、body 标签、容器和一个空的占位符元素加上 display:inline-block 使用 height:100%；和 vertical-align: middle 用于内容和占位符，用于垂直居中跨浏览器具有未定义高度的内容。占位符元素被赋予 100% 的高度来支撑线框，因此 vertical-align: middle 具有预期的效果。使用固定宽度的容器来包装图像。

对内容 div 使用 display:inline 并使用 text-align center 到容器 div 对跨浏览器具有未定义宽度的内容进行水平居中。

结合这两种技术来创建一个居中的图像库：

<!doctype html>
<html>
<head>
<title>Centered Image Gallery</title>
<style type="text/css">
html, body, .container, .placeholder { height: 100%;}

img { margin-left: 20px; margin-top: 10px; }

.container { text-align:center; }

/* Use width of less than 100% for Firefox and Webkit */
.wrapper { width: 50%; }

.placeholder, .wrapper, .content { vertical-align: middle; }

/* Use inline-block for wrapper and placeholder */
.placeholder, .wrapper { display: inline-block; }

.fixed { width: 900px; }

.content { display:inline; }

@media,
 {
 .wrapper { display:inline; }
 }
 </style>

</head>
  <body>
  <div class="container">
    <div class="content">
        <div class="wrapper">
          <div class="fixed">
            <img src="http://microsoft.com/favicon.ico">
            <img src="http://mozilla.com/favicon.ico">
            <img src="http://webkit.org/favicon.ico">
            <img src="http://userbase.kde.org/favicon.ico">
            <img src="http://www.srware.net/favicon.ico">
            <img src="http://build.chromium.org/favicon.ico">
            <img src="http://www.apple.com/favicon.ico">
            <img src="http://opera.com/favicon.ico">
            <img src="http://microsoft.com/favicon.ico">
            <img src="http://mozilla.com/favicon.ico">
            <img src="http://webkit.org/favicon.ico">
            <img src="http://userbase.kde.org/favicon.ico">
            <img src="http://www.srware.net/favicon.ico">
            <img src="http://build.chromium.org/favicon.ico">
            <img src="http://www.apple.com/favicon.ico">
            <img src="http://opera.com/favicon.ico">
            <img src="http://mozilla.com/favicon.ico">
            <img src="http://webkit.org/favicon.ico">
            <img src="http://userbase.kde.org/favicon.ico">
            <img src="http://www.srware.net/favicon.ico">
            <img src="http://build.chromium.org/favicon.ico">
            <img src="http://www.apple.com/favicon.ico">
            <img src="http://opera.com/favicon.ico">
            <img src="http://mozilla.com/favicon.ico">
            <img src="http://webkit.org/favicon.ico">
            <img src="http://userbase.kde.org/favicon.ico">
            <img src="http://www.srware.net/favicon.ico">
            <img src="http://build.chromium.org/favicon.ico">
            <img src="http://www.apple.com/favicon.ico">
            <img src="http://opera.com/favicon.ico">
            <img src="http://mozilla.com/favicon.ico">
            <img src="http://webkit.org/favicon.ico">
            <img src="http://userbase.kde.org/favicon.ico">
            <img src="http://www.srware.net/favicon.ico">
            <img src="http://build.chromium.org/favicon.ico">
            <img src="http://www.apple.com/favicon.ico">
            <img src="http://opera.com/favicon.ico">
            <img src="http://mozilla.com/favicon.ico">
            <img src="http://webkit.org/favicon.ico">
            <img src="http://userbase.kde.org/favicon.ico">
            <img src="http://www.srware.net/favicon.ico">
            <img src="http://build.chromium.org/favicon.ico">
            <img src="http://www.apple.com/favicon.ico">
            <img src="http://opera.com/favicon.ico">
            <img src="http://mozilla.com/favicon.ico">
            <img src="http://webkit.org/favicon.ico">
            <img src="http://userbase.kde.org/favicon.ico">
            <img src="http://www.srware.net/favicon.ico">
            <img src="http://build.chromium.org/favicon.ico">
            <img src="http://www.apple.com/favicon.ico">
            <img src="http://opera.com/favicon.ico">
            <img src="http://mozilla.com/favicon.ico">
            <img src="http://webkit.org/favicon.ico">
            <img src="http://userbase.kde.org/favicon.ico">
            <img src="http://www.srware.net/favicon.ico">
            <img src="http://build.chromium.org/favicon.ico">
            <img src="http://www.apple.com/favicon.ico">
            <img src="http://opera.com/favicon.ico">
            <img src="http://mozilla.com/favicon.ico">
            <img src="http://webkit.org/favicon.ico">
            <img src="http://userbase.kde.org/favicon.ico">
            <img src="http://www.srware.net/favicon.ico">
            <img src="http://build.chromium.org/favicon.ico">
            <img src="http://www.apple.com/favicon.ico">
            <img src="http://opera.com/favicon.ico">
            <img src="http://mozilla.com/favicon.ico">
            <img src="http://webkit.org/favicon.ico">
            <img src="http://userbase.kde.org/favicon.ico">
            <img src="http://www.srware.net/favicon.ico">
            <img src="http://build.chromium.org/favicon.ico">
            <img src="http://www.apple.com/favicon.ico">
            <img src="http://opera.com/favicon.ico">
            <img src="http://mozilla.com/favicon.ico">
            <img src="http://webkit.org/favicon.ico">
            <img src="http://userbase.kde.org/favicon.ico">
            <img src="http://www.srware.net/favicon.ico">
            <img src="http://build.chromium.org/favicon.ico">
            <img src="http://www.apple.com/favicon.ico">
            <img src="http://opera.com/favicon.ico">
        </div>
      </div>
   </div>
   <span class="placeholder"></span>
</div>

</body>
</html>
于 2012-06-22T00:40:46.770 回答
0

我用了

.on('load', function () {

反而

.each(function(){

在此答案中使用它有助于消除尚未加载图片时高度和宽度为空值的问题

<style type="text/css">
.fixed-div {
    position: relative;
}

.variable {
    width: 100%;
    height: auto;
}

.variable.js-fix {
    position:absolute;
    top:50%;
    left:50%;
}
</style>

<script type="text/javascript">
jQuery(document).ready(function(){
    $(".fixed-div img.variable").on('load', 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.
        console.log("width", $(this).width());
        console.log("height", $(this).height());

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

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

<div class="fixed-div">
    <img class="variable" src=""/>
</div>
于 2014-05-16T05:31:12.147 回答
0

使用 CSS3 flexbox，您将不再需要任何技巧来使图像居中。目前所有现代浏览器都支持它。查看我可以使用 flexbox 吗？

.container {
  display: flex; /* Flexible layout container */
  justify-content: center; /* Horizontal center alignment */
  align-items: center; /* Vertical center alignment */
  background: lightblue;
  /* Fixed size container */
  height: 300px;
  width: 300px;
}
<div class="container">
  <img src="http://placehold.it/150x150">
</div>

于 2015-09-17T12:32:45.690 回答
0

水平和垂直居中图像

演示：

http://jsfiddle.net/DhwaniSanghvi/9jxzqu6j/

 .section {
            background: black;
            color: white;
            border-radius: 1em;
            padding: 1em;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-right: -50%;
            transform: translate(-50%, -50%) 
       }
于 2015-09-17T12:22:45.300 回答