PDA

View Full Version : centering img in a div


BullDog
03-11-2013, 10: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?

Thanx,
Matt

http://uac.flat4design.com/index.html

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

gentleone
03-12-2013, 10: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}

BullDog
03-16-2013, 01: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.

BullDog
03-16-2013, 06: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 -->

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

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

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

<!DOCTYPE HTML>
<html>
<head>
<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 }
</style>;
</head>
<body>
<div id="myoutercontainer">
<div id="myinnercontainer">
<p>Hey look! I'm vertically centered!</p>
<p>How sweet is this?!</p>
</div>
</div>
</body>
</html>

gentleone
03-19-2013, 08: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).
http://css-tricks.com/centering-in-the-unknown/

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