Guest Martin Alm Posted February 21, 2007 Share Posted February 21, 2007 Hi,I want to have three images side-by-side centered on a page.I have achieved this by placing the images in a <div> with the following style: #imgdiv { width: 300px; height: 140px margin-left: auto; margin-right: auto;} This works fine, but requires me to know the combined size of the images.Is there a smarter way to do this, so that I can load any images in there and have them centered (side-by-side)?Thanks for any help/Martin Link to comment Share on other sites More sharing options...
jesh Posted February 21, 2007 Share Posted February 21, 2007 How about adding text-align: center to the div? <html><head><style>div { border: 1px solid red; text-align: center; }</style></head><body><div><img src="http://www.w3schools.com/images/w3default80.jpg" /><img src="http://www.w3schools.com/images/w3default80.jpg" /><img src="http://www.w3schools.com/images/w3default80.jpg" /></div></body></html> Link to comment Share on other sites More sharing options...
Err Posted February 23, 2007 Share Posted February 23, 2007 You can force all images to have any size you want no matter how different the image sizes may be. Than you can have them centered perfectly with the code jesh has provided to you. Link to comment Share on other sites More sharing options...
MrAdam Posted February 23, 2007 Share Posted February 23, 2007 an alternative i discovered was: div#imgdiv{ display: inline; margin: 0px auto;} I'm not positive it will work, but give it a go. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now