开发者

Vertically and Horizontally Center Image inside a Div, if you don't know Image's Size?

问答 作者：

If I have a fixed sized container div, and an unknown sized image, how do I horizontally and vertically center it?

  • using pure css
  • using JQuery if css can't do it

This answer makes sense for fixed width images, but not va开发者_StackOverflow社区riable ones.

Something like this structure (I have in mind item renderers similar to these in the list, but where the image on the left wouldn't always be the same size:

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

Thanks for the help!

If setting the image as a background image and centering it that way isn't an option, the jQuery to adapt the answer you linked for static images would go:

$(".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
  });
});

assuming a CSS class defined as

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

with the fixed-width div having a height and position:relative declared.

[important js edit: switched '.style()' to '.css()']

You could use background-position for that.

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

Crossbrowser solution

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

Original solution for vertical div positioning

Check out my solution: http://codepen.io/petethepig/pen/dvFsA

It's written in pure CSS, without any JS code. It can handle images of any size and any orientation.

add another div to your HTML code:

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

CSS code:

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

Update: I got rid of this <div class="trick"></div> element in favor of :before CSS selector

If you dont know the image sizes but you have uploaded the pictures next to the size of the container (maybe bigger or smaller images), this post can be useful. Something that is working for me is the next code:

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

And in the .css file you have the next rules:

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

You can notice you have an image tag inside the a.linkPic, so first you have to set it as "position:relative" for containing the "img" absolute element. The trick to center the picture without problems is a little jQuery code. Follow the comments to understand what is going on (some lines were taken from the Vladimir Maryasov post in this page):

$("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
});

After this, all the pictures inside in a.linkPic containers will be placed perfectly centered. I Hope this post can be useful for someone!

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

You can also align this way. At least thats how i did it and it worked for me. May not be the best way of doing it. I had a bunch of different size logos inside fixed size divs.

First get the dimensions of the image. Then based on the height of your div you can figure out what the top margin should be. This will vertically center it. Just change $IMG_URL and $DIVHEIGHT values.

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

For example. 

<div style="margin-top:".$margin-top."px\"><img src="" /> </div>

This is a PHP variant.

It is a lot of code but works like a charm. I came up with it after reading several posts on this subject. It positions images of various sizes in een fixed width and height div

You CSS should contain this:

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

Your code should be this:

<?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>';
?>

Use height:100% for the html tag, body tag, container and an empty placeholder element plus display:inline-block; and vertical-align: middle for the content and placeholder to vertically center content that has an undefined height across browsers. The placeholder element is given 100% height to prop up the line box, so that vertical-align: middle has the desired effect. Use a fixed width container to wrap the images.

Use display:inline for the content div and text-align center to the container div to do horizontal centering for content that has an undefined width across browsers.

Combine both techniques to create a centered image gallery:

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

I used

.on('load', function () {

instead

.each(function(){

used in this answer it helps to eliminate the problem with empty values ​​of height and width when the picture is not yet loaded

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

With CSS3 flexbox, you will not need any more hacks to center the image. It is currently supported by all modern browsers. Check out 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>

Center image horizontally and vertically

DEMO:

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

继续阅读：centercssjavascript

更多精彩内容

0

上一篇:

下一篇:

精彩评论

暂无评论...
登录 注册
Qedev.com
验证码 换一张
取 消

最新问答

问答排行榜

法律声明：本站内容均为网友上传，网站举办方负责审核和监督，

如存在版权或非法内容，欢迎举报，我们将尽快予以删除。

Copyright © 2018-2020 开发者. All rights reserved.

Powered by 开发者

ICP备案号： 京ICP备10032868号-9