Nocturna Posted November 10, 2012 Share Posted November 10, 2012 Hello, I'm having an issue centering images on my site and was hoping someone could help. I'm trying to center an image on my site (it's the only content at the moment) and can do so on an internal stylesheet in the HTML code but not in an external stylesheet. I'm certain that it's not an issue with the HTML finding the external sheet as the body "background-color" does work. Below is the coding I's using: Internal Stylesheet (background colour is there and image is centered): <!DOCTYPE html><html><head><base href="http://www.website.com/images/"><base target="_blank"><title>website</title><style type="text/css"> body {background-color:#d8d8d8;} img.center { display:block; margin-left:auto; margin-right:auto; }</style> </head><body><img class="center" src="comingsoon.png" alt="Coming Soon..." width="800" height="600"> </body></html> External Stylesheet (background colour is there but image is not centered): HTML: <!DOCTYPE html><html><head><base href="http://www.website.com/images/"><base target="_blank"><title>website</title><link rel="stylesheet" type="text/css" href="/stylesheets/cssmain.css"> </head><body><img class="center" src="comingsoon.png" alt="Coming Soon..." width="800" height="600"> </body></html> CSS: body {background-color:#d8d8d8;}img.center { display:block; margin-left:auto; margin-right:auto;} Link to comment Share on other sites More sharing options...
Ingolme Posted November 10, 2012 Share Posted November 10, 2012 It is possible that the <base> element is giving a wrong path to the stylesheet, see if it works when removing it. Due to the fact that an image is an inline element by default, the best way to center it is to put it into a container and set the text-align to "center"Example: .container { text-align: center; } <div class="container"> <img></div> Link to comment Share on other sites More sharing options...
Nocturna Posted November 10, 2012 Author Share Posted November 10, 2012 I took out the <base> element (I had understood that it was needed to retrieve images) and used the text-align and the website seems to be working well now. Thanks! 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