logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 03-11-2013, 10:37 PM   #1
BullDog
 
Join Date: Nov 2011
Location: Alameda, CA
Posts: 156
Default centering img in a div

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 is offline   Reply With Quote
Old 03-11-2013, 11:50 PM   #2
BullDog
 
Join Date: Nov 2011
Location: Alameda, CA
Posts: 156
Default

I was able to get it close with padding but would like to know how to do it without.
BullDog is offline   Reply With Quote
Old 03-12-2013, 10:07 AM   #3
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

If you set that image to display: block in your CSS, then you can just use margin: 0 auto; to center it
Code:
img.withclassname {
    display: block;
    margin: 0 auto}
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 03-16-2013, 01:12 AM   #4
BullDog
 
Join Date: Nov 2011
Location: Alameda, CA
Posts: 156
Default

this is what I tried last:

Code:
.slideshow img { 
	background-color: #ffffff; 
	padding: 9px; 
	margin: auto; 
	display: block;
	vertical-align: middle;
	}
shouldnt this have the same effect.
BullDog is offline   Reply With Quote
Old 03-16-2013, 06:51 AM   #5
BullDog
 
Join Date: Nov 2011
Location: Alameda, CA
Posts: 156
Default

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?

Code:
.slideshow { 
	height: 200px; 
	width: 100%;
	display: block;
	margin: auto; 
	vertical-align: middle;
	}
Code:
 <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 -->
BullDog is offline   Reply With Quote
Old 03-18-2013, 10:29 AM   #6
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,175
Default

not sure but maybe the images need a size height and width
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 03-18-2013, 10:42 AM   #7
BullDog
 
Join Date: Nov 2011
Location: Alameda, CA
Posts: 156
Default

Unfortunately that doesnt work either.
BullDog is offline   Reply With Quote
Old 03-19-2013, 03:04 AM   #8
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,175
Default

play with this

Code:
<!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>
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 03-19-2013, 08:58 AM   #9
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

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/
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 04-26-2013, 03:15 AM   #10
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,175
Default

worth checking http://www.sitepoint.com/css3-respon...entered-image/
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 02:52 AM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com