Place Image at Center (CSS)

[atikah8890]

Hi all. I'm developing an e-Learning system with Moodle and now tweaking the header. Instead of having text, I have put in a header image. My supervisor wants it to be centered. I have done that by adjusting the margin.

We will be presenting the project using a different computer (and thus the screen resolution could differ). My question is: regardless of screen resolution, is it possible for the header to be centered using CSS? Because when I changed the screen resolution to 800x600 last Friday, the header image was much more to the right. Basically it didn't look right, and I'd like to change that if possible.

As of right now, besides adjusting the four margin numbers (# # # #), I also use the margin-left and margin-right and have set them to auto.

Hope the info I've provided is suffice. Thank you in advance for your help.

Regards,
Atikah

[Flynox]

<img class="BLARGBLAH" src="BLARGBLAHBLAH.picture"

Class defines the picture

img.BLARGBLAH {
display:block;
margin-left: auto;
margin-right: auto
}

Use img because you are defining an img and then define the img by using BLARBLAH
I use display:block because that's just what I do.
margin-left and margin right being auto'd should now make it center.
And are you saying that different screen resolutions will mess up the website layout and move things to where they're not supposed to be?

If you still have a problem, please post the website.

[atikah8890]

Hi, thanks for the reply. I've tried your code and the outcome is still the same. I don't know if I'm doing it wrong.

Here's the code in the CSS style sheet:

h1.headermain {
  color: #0066ff;
  margin: -5px 0 -2px 227px;
  font-size: 180%;
}

img.hdrmain{
  display:block;
  margin-left: auto;
  margin-right: auto
}

And here's in the header.html file:

<?php print_container_start(true, '', 'header-home'); ?>
        <h1 class="headermain"><img class="hdrmain" src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/
latest.png" width="750" height="120" alt="" /></h1>

I noticed there's somewhat a nested class there for the image being in both the H1 and hdrmain. That's not a problem, is it?

I'm sorry but I'm not sure how to give an exact URL to you. The e-Learning site is on the local server at the moment. Here are the screencaps.

1366x768

800x600

[Flynox]

Do you have to scroll to the right or left in the 1366x768 one? if so, how much? more? less?
EDIT: Hold on, I'm gana fool around with it.
EDIT edit: I can't right now because aunt took charger with her to bed and she's sleeping. Labtop about to die.

[atikah8890]

Nope, I don't have to scroll in the 1366x768 one :)

[teedoff]

Do you have a live link to this site?

[RoyalElite96]

CSS:

#container{
	background-color: #CCCCCC;
	width: 100%;
	height: 100%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

HTML:

<div id="container">
<img src="" width="100" height="100" style="display: inline" />
</div>

I hope this is helpful.

[atikah8890]

teedoff: the e-Learning system is being developed on a local server at the moment. I'm not sure how to go around giving you the correct URL. Sorry.

RoyalElite96: the code you provided still didn't do the trick. I omitted the margin syntax in the h1.headermain I posted earlier, but it still doesn't work.

I consulted my supervisor yesterday evening, and as of right now, we're settling for the header image to be left-aligned, rather than center. I just have to resize the banner, but personally, it doesn't look bad at all not being at the center!

Thanks all, for your help.

Cheers,
Atikah

[Flynox]

That wouldn't really be necessary, this CAN be fixed, it's just that we MIGHT need to see the website and have the website link. But since you said that, people will not try to solve this problem anymore. However, if you still want it in the center, and can provide a web link, Just save the link to this thread, then post the thread link in a new post, then ask how to fix it.
Sorry nobody could help you today. I'm sure that there is over 100 people on this forum that could've solved this today, but wasn't online or didn't look at the html/css forum altogether.

[atikah8890]

Yes, I'm certain it's not impossible to solve but it might take some time :) I will settle for how it is at the time being since there are a lot more to work on (user manuals, tutorial presentations, quiz setting, etc.) but if I ever have a look at this header issue again, I'll come here.

Thanks again ;)

[teedoff]

I suggest you publish this site live somewhere. There are free hosting servers online for ppl trying to get a site up to test. Just google them. They are of course limited, but would certainly be enough for what you need presently.

When dealing with images, its hard for someone here to help, since we dont have your images locally. Not to mention you dont post all of your html and css code.

[tinymark]

Try changing the width to a fixed number. I think what is happening is that the div container is shrinking to the size of the img because it is the only content in the div. The margins are centering your img in a div that is the same size as the img.

[atikah8890]

teedoff, I will make sure to keep in mind everything you've told me. Sorry if this was a waste of time.

[Felixius]

Hi there!
This is my first post to Daniweb - I know this tread is a bit old, but I may have a solution to this issue... if you haven't worked it out already...

The code you provided shows the problem specifically.
Your CSS

h1.headermain {
  color: #0066ff;
  margin: -5px 0 -2px 227px;
  font-size: 180%;
}

img.hdrmain{
  display:block;
  margin-left: auto;
  margin-right: auto
}

Your html

<?php print_container_start(true, '', 'header-home'); ?>
        <h1 class="headermain"><img class="hdrmain" src="<?php echo $CFG->themewww .'/'. current_theme() ?>/pix/
latest.png" width="750" height="120" alt="" /></h1>

While you have coded the css correctly, the issue lies in the image sitting within the h1 tags. Notice the margin settings for h1 are "margin: -5px 0 -2px 227px;". Going on the T-R-B-L guide, the h1 tag should start 227px from the left. Then, from that point, the image that sits inside the h1 tag is perfectly centred!

What you may want to try is -

h1.headermain {
  color: #0066ff;
  margin: -5px auto -2px auto;
  
font-size: 180%;
}

img.hdrmain{
  display:block;
  margin-left: auto;
  margin-right: auto

Better late than never?

Felixius

[atikah8890]

I was finished with this a few months ago but don't think we ever managed to get it right with this thing specifically. If I ever dig into these coding again, I will sure to try your solution. Thank you :)

[teedoff]

If you cant give us a link, can you post the full html and css code? Little more trouble recreating the whole page locally, especially when dealing with an image, but its possible.