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

Posted 2023-03-05

技术标签:

【中文标题】如果您不知道图像的大小，请在 Div 中垂直和水平居中图像？【英文标题】：Vertically and Horizontally Center Image inside a Div, if you don't know Image's Size? 【发布时间】：2011-01-27 01:50:36 【问题描述】：

如果我有一个固定大小的容器 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>

感谢您的帮助！

【问题讨论】：

【参考方案1】：

你可以使用background-position。

#your_div 
    background-position: center center;
    background-image: url('your_image.png');

【讨论】：

旁注：如果您要居中的是 PNG，请确保它不透明，否则您可能会遇到 IE6/etc 问题。 -- 当然，除非你使用 jQuery 插件或其他东西来解决透明度问题。抱歉，我的问题可能没有正确表达。该图像将是加载到 img 标签中的图像。我已经更新了这个问题。但这很有用，谢谢！ @Viatropos：在这种情况下，我建议使用 edtsech 发布的跨浏览器解决方案【参考方案2】：

如果将图像设置为背景图像并以这种方式居中不是一个选项，那么 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()']

【讨论】：

【参考方案3】：

使用显示：div 的表格单元技巧

在：Firefox、Safari、Opera、Chrome、IE8 中正常工作

CSS 示例：

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

img 
  display: inline;

html 示例：

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

Firefox example

【讨论】：

请注意，IE 对此有问题：quirksmode.org/css/display.html#t07（一般情况下——不知道这种情况，从未尝试过）。我认为这是纯粹的天才，但有一个障碍。我为外部 div 设置的自动边距消失了，所以我得到了一张居中在一个盒子里的图片，但是盒子卡在了左上角。我在 IE 上使用了这个技巧，我会尽快为 IE 找到解决方案。【参考方案4】：

跨浏览器解决方案

<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"  />
  </div>
</div>

Original solution for vertical div positioning

【讨论】：

... 如果它们的名称以 octothorpe 开头，则适当的浏览器将丢弃 CSS 属性。但是，IE 没有。【参考方案5】：

您也可以这样对齐。至少我就是这样做的，它对我有用。可能不是最好的方法。我在固定大小的 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>

【讨论】：

【参考方案6】：

对 html 标签、body 标签、容器和一个空的占位符元素加上 display:inline-block 使用 height:100%；和垂直对齐：内容和占位符的中间垂直居中在浏览器中具有未定义高度的内容。占位符元素被赋予 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>

【讨论】：

【参考方案7】：

这是一个 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 >';
echo '<div class="friend_photo_cropped">';
        echo '<img src="'.$yourImage.'"   style="top:'.$top.'px;left:'.$left.'px;">';
echo '</div>';
echo '</td>';
?>

【讨论】：

【参考方案8】：

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

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

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

<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> 元素，转而使用 :before CSS 选择器

【讨论】：

【参考方案9】：

我用过

.on('load', function ()

改为

.each(function()

用在this answer中，有助于消除图片还未加载时高宽为空的问题

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

【讨论】：

【参考方案10】：

水平和垂直居中图像

演示：

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

【讨论】：

【参考方案11】：

使用 CSS3 flexbox，您将不再需要任何技巧来使图像居中。目前所有现代浏览器都支持它。查看Can I use 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>

【讨论】：

【参考方案12】：

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

<a class="linkPic" href="#">
    <img src="images/img1.jpg" />
</a>
<a class="linkPic" href="#">
    <img src="images/img2.jpg" />
</a>
<a class="linkPic" href="#">
    <img src="images/img3.jpg" />
</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 代码。跟随 cmets 了解正在发生的事情（部分内容来自本页 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 容器中的所有图片都将完全居中放置。我希望这篇文章对某人有用！

【讨论】：

以上是关于如果您不知道图像的大小，请在 Div 中垂直和水平居中图像？的主要内容，如果未能解决你的问题，请参考以下文章

调整大小以适合 div 中的图像，并水平和垂直居中

仅使用 CSS 和 HTML 垂直和水平居中可变大小的图像放大（在 div 中）

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

未知宽高的div怎么垂直水平居中

在 ASP.NET 中的 DIV 内水平和垂直居中图像

在页面上居中（垂直和水平）显示一张（未知尺寸的）图像