Centering an image in all monitor resolutions /Urgent

Centering an image in all monitor resolutions /Urgent

- margarida silva の投稿
返信数: 9
Hello!!

This is the moodle I am designing: http://moodle.smartthink.com

The header image is to be on the center. But when the monitor is higher than 1024x768 the image looks like this:

image

Is not in the center.
I've tried putting it in a table 100% but it's the same. 悲しい I need some urgent help. Thank you for your help!

margarida silva への返信

Re: Centering an image in all monitor resolutions /Urgent

- Mauno Korpelainen の投稿

Try this:

replace these tags around logo

<h1 class="headermain">....</h1>

with

<p style="text-align: center;border-width: 0px;">....</p>

and add to fw_layout.css at the beginning of headermenu

.headermenu {
  position:absolute;
top:10px;right:15px;

to get menu to correct place.

Mauno Korpelainen への返信

Re: Centering an image in all monitor resolutions /Urgent

- margarida silva の投稿
Hi, thank you for your answer, but it remains not center. 悲しい Oh ...

I am just wondering... is it possible to center an image? To maintain the image always center even if the resolutions is high or small?

morto


margarida silva への返信

Re: Centering an image in all monitor resolutions /Urgent

- Mauno Korpelainen の投稿

Hi Margarida,

I checked your site and you have a code:

<p style="img-align:center;border-width: 0px;"><img src='http://moodle.smartthink.com/theme/formal_white_maga/logo.jpg' />
    </p>

it must be TEXT-ALIGN
not IMG-ALIGN as you have !!!!

It works, I tested it before sending my previous message. smile

Mauno Korpelainen への返信

Re: Centering an image in all monitor resolutions /Urgent

- margarida silva の投稿

Yes, I know. I've change to IMG, but now I've again in TEXT, but it's the same. 悲しい image

Anyway, thank you for your help.
margarida silva への返信

Re: Centering an image in all monitor resolutions /Urgent

- Gordon Bateson の投稿
画像 Core developers 画像 Peer reviewers 画像 Plugin developers
> it's the same

It doesn't look the same to me. The logo in your second screenshot is centered, but in the first screenshot it was lined up with the "MOODLE ESHTE" logo.

Personally speaking, I don't think you should center the image. Leave it left aligned.

One trick you could try to make the logo left-aligned but appear to occupy the entire screen width on varying screen sizes is to put the image in a <div> which has a certain background color. The <div> should stretch to the right hand side of the screen. Now, remove the red border around the image and have the have the right hand side of the image fade to the background color of the <div>. This will make the image appear to stretch the entire screen width, whatever the screen size.
margarida silva への返信

Re: Centering an image in all monitor resolutions /Urgent

- Mauno Korpelainen の投稿
The image IS CENTERED, but your logo (the image itself) has empty space at the left side. That's why it looks like it is not centered! Cut this red area away and it looks better...
添付 reason.jpg
Mauno Korpelainen への返信

Re: Centering an image in all monitor resolutions /Urgent

- margarida silva の投稿
Hi. 笑顔

I've done that, the empty space because at 1st it was the only way to center the image on my resolution (1024)

I am trying to check with your notes, I will let you know. THANK YOU!
margarida silva への返信

Re: Centering an image in all monitor resolutions /Urgent

- margarida silva の投稿
YES!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

olhos bem abertos 笑顔

Thank you!!!