3

I have a square <div> (70px x 70px) which will contain an image of a variable dimensions(Square, landscape or potrait). I want this image to be symmetrically centered inside the <div>. how do I get it..?

<div class="img-polaroid" style="width: 70px; height: 70px; background-color: black; text-align:center;">
    <image src='.base_url("images/store/images/".$image->image).'  />
</div>

The actual size of the image can be greater than 70px x 70px. But it should fit symmetrically in the center.

I also have to make it cross-browser compatible.. Help Appreciated...

4

8 回答 8

0

Must it be an <img> element?

You can set the image as background of the <div> with background-position:center center - this is very easy to do, not using javascript and cross-browser..

Use it like this:

<div class="img-polaroid" style="width: 70px; height: 70px; background:url('.base_url("images/store/images/".$image->image).') center center no-repeat black; text-align:center;"></div>

Check this Working jsFiddle. In terms of browser support I've never come across a browser that doesn't support this.

It is sure to work on:

  • Netscape 6+
  • Mozilla 1+
  • Firefox 1+
  • Internet Explorer 4+
  • Opera 3+
  • Safari 1+
于 2013-06-28T10:15:45.337 回答
0

This will do the trick for u

.img-polaroid img{display:block; margin:0 auto;}
于 2013-06-28T10:21:53.650 回答
0

Use display: table-cell; for your div with your text-align: center; and vertical-align: middle;

Below is the code:

<div class="img-polaroid" style="width: 70px; height: 70px; background-color: black; border: 1px solid yellow; text-align:center; vertical-align: middle; display: table-cell;">
    <image src="http://www.gelifesciences.com/gehcls_images/GELS/Link%20Images/Product%20Link%20Images/ImageScanner%20III%2050x50.jpg" />
</div>

and here is the example: http://jsfiddle.net/eUGb6/

Here you can find more about compatibility issues:

vertical-align text-align display

于 2013-06-28T10:25:41.173 回答
0 
<div class="img-polaroid" style="width: 70px; height: 70px; background-color: black; text-align:center;">
    <image src='.base_url("images/store/images/".$image->image).'  />
</div>

should be

<div class="img-polaroid" style="width: 70px; height: 70px; background-color: black;display:table-cell;vertical-align:middle;text-align:center;">

 <image src='.base_url("images/store/images/".$image->image).'  />
</div>

add display:table-cell;vertical-align:middle;

于 2013-06-28T10:29:45.377 回答
0

It's very simple to do it vertically/horizontally alignment.

First build a holder div:

.holder {
display: table;

}

Then build a container div:

.container {
display: table-cell;
vertical-align: middle;
text-align: center
}

And in your container, it would be shown everything centered. I didn't test it yet.. but should work ;p

<div class="holder">
     <div class="container">
          <img src="YOURIMAGE" />
     </div>
</div>
于 2013-06-28T11:38:34.243 回答
0

Its easy :)

.img-polaroid {
    display:table-cell;
    vertical-align: middle

    }

check fiddle http://jsfiddle.net/9hppL/2/

于 2013-06-28T12:07:40.200 回答
0

You can use the display:inline-block and :after for div, like this:

div {
  width: 70px;
  height: 70px;
  text-align: center;
  border: 1px solid green;
}
div:after {
  content:"";
  display: inline-block;
  width:0;
  height: 100%;
  vertical-align: middle;
}
img {
  vertical-align: middle;
}

Please view the demo.Click here, you can look at other solutions.

于 2013-07-01T04:18:04.790 回答
-1

This is your ultimate guide to centering things in CSS> http://www.w3.org/Style/Examples/007/center

Here is a working jsfiddle: http://jsfiddle.net/9hppL/

.img-polaroid {
    display: table-cell;
    vertical-align: middle
}

#image {
    background: blue;
    width: 50px;
    height: 50px;
    margin-left: auto;
    margin-right: auto;
}
于 2013-06-28T10:17:57.803 回答