homepage Welcome to WebmasterWorld Guest from 54.167.174.90
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
HTML5 Centering Two/Three Images Side By Side
RedBar

WebmasterWorld Senior Member Top Contributors Of The Month



 
Msg#: 4658833 posted 2:01 pm on Mar 31, 2014 (gmt 0)

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

 

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4658833 posted 2:26 pm on Mar 31, 2014 (gmt 0)

<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 */
}

RedBar

WebmasterWorld Senior Member Top Contributors Of The Month



 
Msg#: 4658833 posted 4:10 pm on Mar 31, 2014 (gmt 0)

Thanks, and this does work perfectly, but it is still going left-adjusted, any ideas?

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4658833 posted 5:29 pm on Mar 31, 2014 (gmt 0)

I'm not sure what you mean by it works perfectly but it is still going left-adjusted.

RedBar

WebmasterWorld Senior Member Top Contributors Of The Month



 
Msg#: 4658833 posted 5:31 pm on Mar 31, 2014 (gmt 0)

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

drhowarddrfine

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4658833 posted 1:08 am on Apr 1, 2014 (gmt 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.

Planet13

WebmasterWorld Senior Member planet13 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4658833 posted 2:38 pm on Apr 5, 2014 (gmt 0)

"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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved