Welcome to WebmasterWorld Guest from 54.225.6.51

Forum Moderators: incrediBILL

Message Too Old, No Replies

HTML5 Centering Two/Three Images Side By Side

     
2:01 pm on Mar 31, 2014 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Oct 14, 2013
posts:2400
votes: 204


I've looked, I've researched, I've spent TOO many hours trying to find the answer to this, just what is wrong with <center> </center>?

I have an html5 website that validates perfectly except for this, centering one image is not a problem but two or more, seemingly it's a nightmare.

Has anyone the solution?

Thanks
RB
2:26 pm on Mar 31, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4988
votes: 12


<center></center> is a presentational element, meaning it doesn't have any semantic meaning, it only affects the presentation. As such, it should be avoided in favor of using CSS to control presentation.

Here's an easy way to center multiple images. Just wrap them into a single container (it's really that container element that you want to center):

<div>
<img src="http://www.example.com/example1.png">
<img src="http://www.example.com/example2.png">
</div>

Then apply these styles to the container:

div {
display: table; /* shrink wrap the contents */
margin: 0 auto; /* center via left/right margins */
}
4:10 pm on Mar 31, 2014 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Oct 14, 2013
posts:2400
votes: 204


Thanks, and this does work perfectly, but it is still going left-adjusted, any ideas?
5:29 pm on Mar 31, 2014 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 4988
votes: 12


I'm not sure what you mean by it works perfectly but it is still going left-adjusted.
5:31 pm on Mar 31, 2014 (gmt 0)

Senior Member from GB 

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Oct 14, 2013
posts:2400
votes: 204


Not to worry I've cracked it at long last...so darned simple, doh!
1:08 am on Apr 1, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:May 23, 2005
posts:742
votes: 0


Another big reason to avoid the <center> element: it no longer exists in the HTML5 spec. It's gone. Don't use stuff that doesn't exist.
2:38 pm on Apr 5, 2014 (gmt 0)

Senior Member

WebmasterWorld Senior Member planet13 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:June 16, 2010
posts: 3813
votes: 29


"Not to worry I've cracked it at long last...so darned simple, doh! "


When you solve a problem yourself, it is a good idea to post the solution here in order to help others who might have the same problem... no matter how seemingly obvious the solution might be.