HTML relative centre align

Question

I'm trying to centre align an image using a div and a CSS class (the tag is wrapped in a div class="center" tag). What I'm using at the moment is working in Dreamweaver (when I go to design view) but not when I load the page up in Safari. Here is my code:

.center {
  display:inline; 
  text-align:center; 
  -webkit-inline; 
  -webkit-center; 
  background-color:transparent;
}

Sorry for asking such a simple question, I'm completely new to HTML, my experience is in Objective-C.

Answer 1

text-align: center caused the content to be centered (within the container), and not the container itself being centered.

Since you use display: inline, the size of the container will be the same as its content, and the centering will not have the effect you're after.

Either, you use the margin: 0 auto to center the container (towards its parent container), OR you change display: inline to display: block.