centering an image inside a div tag

[kevwood]

hi i am trying to center and image in a div horizontally and vertically.  i have tried to use a table cell then center that but no eval.  i added some padding to the top which worked well.  but when the small images are loaded in they just sit 10px from the top.

 

here is the code i am using to try to center the div

 

text-align : center;
display : table-cell;
vertical-align : middle;
padding-top : 10px;

[Christian F.]

I think you'll find the following page informative:

http://andersdn.tumblr.com/post/4798994952/absolute-middle-div-using-css

 

Just adjust the element names to suit your code, and you should be set.

[kevwood]

from what i can see from that it is just centering a div inside another div.  this would just give me the same problem though wouldnt.  when the inages are loaded into the inner differ the small ones will appear out of place, and also this div will not be centered to to the center of the page just in its 200m x 200px space.

[xyph]

What small images? I think you need to provide us with more information

[kevwood]

I am loading information on to my page into a section which is 600px wide and 200px high.  i have sectioned the left side of this for the images which gives me a space of 200x200px to load images into. the problem i am getting is that is my images are say 100px high and the next is 150px because i have used padding to get the larger image into the middle of the div the small one with only remain as far from the top as the padding states.

[Mahngiel]

http://jsfiddle.net/Mahngiel/q3eub/

 

Vertical-ness isn't something browsers generally consider margin-able like the sides are.  Unless you're working with positioned elements, you'll need to use margins to offset.

[kevwood]

when trying to use positioned elements i have not been able to get the elements to sit right on the page.  does any one have a link to some good info on working with positioned elements.

 

i have been trying to convert all the width on my div's to % instead of using px i am used to using a tabular way of building web pages so the whole div/css thing is new but i am making good head way up to now.

[Mahngiel]

does any one have a link to some good info on working with positioned elements.

http://www.barelyfitz.com/screencast/html-training/css/positioning/

[kevwood]

so from what i have read i would need to use a relative positioned div then have an absolute div placed in the center of the second div to load the image into this.

 

would this not just give the same problem though as the images that are being loaded in are of different sizes.

 

at the min i have it set up with a container div holding three separate div to hold the information.  i have floated the first to divs left and the the third right. i am just loading the images into the first div. 

 

if i now set the first div to be relative to the container div it would then sit it in the top left corner of the container.  i would then need to position the next div to be absolute and give it some margins from the top and left to move this towards the center. 

 

i will try this code out now (or something similar)

 

#container_panel {
position : relative;
}

#img_panel {
position : absolute;
top : 20px;
left : 20px;
width : 200px;
}

#text_panel{
float : right;
}

#link_panel{
float : right;
}

[kevwood]

ok so my code now looks like this

 

.body_panel{
overflow : hidden;
width : auto;
background-color : #FFF;
border : solid #45bf55;
border-width : 3px;
margin-bottom:30px;
}

.body_text{
position:relative;
top:0;
left:200px;
width : 230px;
}

.body_img{
position : relative;
width : 200px;
height : 200px;
background-color : #e0e0e0;
text-align : center;
display : table-cell;
vertical-align : middle;
margin-right : 25px;
padding-top : 10px;
}

.body_link{
float : right;
margin-right : 3px;
padding-top : 90px;
}

 

i have got my image to appear in the center of the div now but i cannot get my other two divs sit next to them now.

 

i need the body_img, the body_text then the body link to now appear all next to each other but they are now all underneath each other.

 

would i need to set a width on the body panel and not set it to auto?

 

the reason i set it to auto was to try to get it to fill the space in the middle of the page.  ideally the body panel would stretch to fit the gap between the left and right divs on the page with a margin of 30 px between each side.  One problem at a time though.

 

so how do i go about getting the divs to sit how i need them to now.  i have tried floating to the right but had no joy and tried to set the relative position with a left margin of 200px but it still just placed it underneath the image but to the right and most of the text is not visible.

[kevwood]

i have been playing with the code some more and now have managed to get everything to sit virtually on top of each of.

 

i think i am having problems with using the code i have written as the container div i load the three sections of information into is a class and reused to load further bits of information into down the page.

 

i am trying to build it so it has fluidity to the design so the panel which holds the information can stretch to fit the available space between the div's i have floated left and right (which i am struggling to achieve at the min).

 

but firstly i want to just get the look of the panel worked out.

 

this is what my code looks like now

 

.body_panel{
position:relative;
overflow:visible;
background-color : #FFF;
border : solid #45bf55;
border-width : 3px;
margin-bottom:30px;
}

        .body_img{
position : absolute;
width : 200px;
height : 200px;
background-color : #e0e0e0;
text-align : center;
display : table-cell;
vertical-align : middle;
margin-right : 25px;
}

.body_text{
position:absolute;
left:25%;
width : 230px;
}

.body_link{
position : absolute;
right : 0;
margin-right : 3px;
padding-top : 90px;
}

 

it is just sitting all the individual panels on top of each starting the top of the next panel 30px down from the last.

 

at least my images are now centered to the img div lol.

[White_Lily]

 

You could try this in order to center the images:

 

 

 

 
.body_img img /*".body_img" specifies the div class/id "img" specifies ALL images within this class/id*/
{


text-align:center;
margin:0px auto;


}