View Full Version : centering img in a div

03-11-2013, 09:37 PM
I am working on ridding an old site of tables and using a new slider but have been unable to get the images centered in the div. Most of the fixes I've seen are fairly old code and not working do far.

Is this because it all sits in a floated div? if so what can I do to correct it?



03-11-2013, 10:50 PM
I was able to get it close with padding but would like to know how to do it without.

03-12-2013, 09:07 AM
If you set that image to display: block in your CSS, then you can just use margin: 0 auto; to center it

img.withclassname {
display: block;
margin: 0 auto}

03-16-2013, 12:12 AM
this is what I tried last:

.slideshow img {
background-color: #ffffff;
padding: 9px;
margin: auto;
display: block;
vertical-align: middle;

shouldnt this have the same effect.

03-16-2013, 05:51 AM
I am trying to target all images in div class=slideshow, to center vertically and horizontally.

this is not working to center in either direction.

Do I need to specify a class for each img?

.slideshow {
height: 200px;
width: 100%;
display: block;
margin: auto;
vertical-align: middle;

<div class="slideshow">
<a target="_blank" href="http://www.paradisemotorsport.com/"> <img src="slider/paradise_200.png" border="0" /></a>
<a target="_blank" href="http://www.bugorama.com/"> <img src="slider/bugformance.png" border="0" /></a>
<a target="_blank" href="http://www.bugpack.com"> <img src="slider/bugpack.png" border="0" /></a>
<a target="_blank" href="http://www.ultravw.com"> <img src="slider/ultravw.jpg" border="0" /></a>
<a target="_blank" href="http://www.jayceevw.com/"> <img src="slider/jaycee.jpg" border="0" /></a>
<a target="_blank" href="http://www.ultimateaircooled.com/simplemachinesforum/index.php"> <img src="slider/ultimate_aircooled_forum_button.jpg" border="0" /></a>
<a target="_blank" href="dragstrip_directory.html"> <img src="slider/drag_strip_directory_button.jpg" border="0" /></a>
<img src="ads/berg.jpg" alt="Gene Berg" />
<img src="ads/honest.jpg" alt="honest engine" />
<img src="ads/ae.jpg" alt="autocraft" />
<a href="http://www.ultravw.com" target="_blank"><img src="ads/ultravw.jpg" alt="ultra vw" /></a>
<a href="http://www.facebook.com/groups/125984680747985/" target="_blank"><img src="ads/racerrelief.png" alt="racer relief" />
<a href="http://www.nationwidepavinginc.com/" target="_blank"><img src="ads/nationwide.jpg" alt="nationwide paving" />
</div> <!-- end slideshow -->

03-18-2013, 09:29 AM
not sure but maybe the images need a size height and width

03-18-2013, 09:42 AM
Unfortunately that doesnt work either.

03-19-2013, 02:04 AM
play with this

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style >
#myoutercontainer { position:relative; height:800px; border:#666 solid 1px; }
#myinnercontainer { position: relative; top:50%; margin:auto; width:500px }
<div id="myoutercontainer">
<div id="myinnercontainer">
<p>Hey look! I'm vertically centered!</p>
<p>How sweet is this?!</p>

03-19-2013, 07:58 AM
If you want to center an element horizontally and vertically then it's easier if you know the width and height of that element. This can be done with negative top and left margins half the height and half the width.

If the dimensions are unknown or are different from each other then you will need some CSS kung-fu.
The last example in the following CSS tricks post (although it wont work in IE7 and below, because of the use of the :before and :after pseudo elements).

04-26-2013, 02:15 AM
worth checking http://www.sitepoint.com/css3-responsive-centered-image/