Jump to content
Nocturna

Image centering works in internal but not in external stylesheet

Recommended Posts

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;}

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

×