3

I have a loop to loaded logo image in floated div block, I been tried few tips from stackoverflow but have no luck to make the logo align center and middle within the div, all logo height are not fixed and might have different height for each:

<div style="float:left; width:80px; height:80px; padding:8px; border:1px solid #ccc;">
    <img width="78px" align="left" src="images/logo/logo1.jpg">     
</div>

Please help, thanks.

conmen
  • 2,377
  • 18
  • 68
  • 98
  • 1
    Did you try this: http://stackoverflow.com/questions/4888223/align-image-in-center-and-middle-within-div. Also FYI, you probably want to put your styling into a CSS class and file. This helps declutter your HTML and is especially useful whenever you get into responsive design and can apply different stylings based on different displays – Minh Nguyen Jul 15 '13 at 03:06

6 Answers6

2

Use positioning. The following worked for me...

With zoom to the center of the image (image fills the div):

    div{
        float:left;
        display:block;
        overflow:hidden;
        width: 70px; 
        height: 70px;  
        position: relative;
    }
    div img{
        min-width: 70px; 
        min-height: 70px;
        max-width: 250%; 
        max-height: 250%;    
        top: -50%;
        left: -50%;
        bottom: -50%;
        right: -50%;
        position: absolute;
    }

Without zoom to the center of the image (image does not fill the div):

   div{
        float:left;
        display:block;
        overflow:hidden;
        width: 100px; 
        height: 100px;  
        position: relative;
    }
    div img{
        width: 70px; 
        height: 70px; 
        top: 50%;
        left: 50%;
        bottom: 50%;
        right: 50%;
        position: absolute;
    }
ThomasAFink
  • 1,257
  • 14
  • 25
1

You really should move your CSS out of the style attribute and into a file like style.css if you have not done so. But if you really have to you can place the code below into inline styles like you have now.

Remove the align="left" attribute from your image tag and set the image's display to block. This will allow margin: 0 auto; to center your image for you inside the containing DIV.

Looks like you'll have to replicate a <table> with CSS to get the vertical centering you desire. Table cells allow vertical centering. To do this I've added and additional DIV with a class of .container. The .container DIV has it's display set to table and the .image-container DIV, which is acting like a table cell, has it's display set to table-cell.

CSS 

.container {
    float: left;
    width: 80px;
    height: 80px;
    padding: 8px;
    border: 1px solid #ccc;
    display: table;
}
.image-container {
    display: table-cell;
    vertical-align: middle;
}
.image-container img {
    display: block;
    margin: 0 auto;
}

HTML 

<div class="container">
     <div class="image-container">
          <img src="images/logo/logo1.jpg">
     </div>
</div>

JSFiddle: http://jsfiddle.net/MJ5j4/

hungerstar
  • 21,206
  • 6
  • 50
  • 59
1

just create a class "centerImgWrapper", and wrap all your "center" Images anywhere in the Code with divs.

Thats pure CSS 

.centerImgWrapper {
 width: 100%;
 height: 100%;
 position: relative;
 overflow: hidden;}

.centerImgWrapper img {
 left: 0;
 right:0;
 top: 0;
 bottom:0;
 max-height: 100%;
 max-width: 100%;
 margin:auto;
 position:absolute;
}

Just Check out the Fiddle. MyFiddle

Dave

DaveM
  • 789
  • 1
  • 7
  • 16
0

If you are trying to get it in the middle inside the div, have you tried:

<div style="width:800px; height:800px; padding:8px; border:1px solid #ccc;">
        <img width="78px" src="mobiIconGreenGray.gif" style="margin-left:50%; margin-top:50%;">     
    </div>

I used "margin-left:50%; margin-top:50%;" INSIDE the IMG tag and got rid of the "align" and "float" attribute. I probably wouldn't want to use "align" in this case. Either way, I hope it helps.

user2403316
  • 178
  • 1
  • 12
  • I think you're attempting to center the DIV not the image with what you have above. – hungerstar Jul 15 '13 at 03:16
  • I just edited it, you're right. now it's in the middle INSIDE the div – user2403316 Jul 15 '13 at 03:30
  • Using `margin-left: 50%;` will push the image's left side to the middle of the DIV along with `margin-top: 50%;` pushing the image's top side to the middle of the DIV. This does not center it. This places the image's top left corner in the middle of the containing DIV. – hungerstar Jul 15 '13 at 03:36
0

Images are more or less displayed as inline-blocks. So you can just set text-align: center; on the styles of the container div.

Getting something to be vertically aligned in the middle is complicated with css. If you're going to be dynamically placing the logo with JavaScript anyway, you can save yourself trouble and just center it vertically by specifying the margins with JavaScript.

Check out this demo: http://jsfiddle.net/jyvFN/1/

HTML

<div id="container">
    <img id="logo" src="http://placekitten.com/100/100" />
</div>

CSS:

#container {
    float: left;
    background-color: blue;
    width: 200px;
    height: 150px;
    text-align: center;
    border: 1px solid red;
}

JavaScript

var logo = document.getElementById('logo');
var container = document.getElementById('container');
var margin = (container.clientHeight - logo.clientHeight) / 2;
logo.style.marginTop = margin + "px";
logo.style.marginBottom = margin + "px";
Nick C.
  • 191
  • 5
-1

Why didn't you set align of the image center? Then your code should be: 

<div style="float:left; width:80px; height:80px; padding:8px; border:1px solid #ccc;">
<img width="78px" align="center" src="images/logo/logo1.jpg">

And I think it's also problem of the ratio of the image width vs the div block + it's padding and border. Try to set it balance.

codelop
  • 64
  • 1
  • 2
  • 7