Question about how to align this picture?

[Alan Vende]

Forum URL: psychic-psyghtings.proboards.com

The page I'm working on is here.

From what I can tell, I have tried everything

• vertical-align: middle;
• position: absolute; and position: relative;
• margin-left: auto; and margin-right: auto;

I don't know why none of those seem to work for some reason to get my image in the middle of the parent div.

After I had posted this thread, I thought, "Why not attempt to make it look like your picture has a rainbow around it. (When a practitioner and/or Master is channeling Reiki, sometimes the aura could become a rainbow color.)

I sort of have it, but now that I put a div around divs (a separate div for the picture and for the text,) it won't act the way I want it to... I want the picture and text to be within the rainbow div, but with my avatar's head being in the yellow piece of it (like it is now). It just doesn't look centered for some reason within that area.

I attempted all I could think of, which is why I'm here for advice.

Thank you all for your help, advice and guidance!

[Alan Vende]

...I just now noticed the Coding Help board... but I cannot move my thread. Could someone please move it for me?

Thanks so much. Sorry about that!

[Kami]

Vertical-align is a depreciated tag and most browsers no longer support it.

Try this in the CSS class for the picture of you:

position: relative;
top: -60px;
display: block;
margin-bottom: 8px;
margin-left: 25%;

[Brian]

Dec 19, 2016 12:05:08 GMT -8 Kami said:

Vertical-align is a depreciated tag and most browsers no longer support it.

To the best of my knowledge the valign HTML attribute is deprecated, but the vertical-align CSS property is not and still enjoys widespread use online so it's an acceptable solution in applicable cases.

[Kami]

Dec 19, 2016 12:22:24 GMT -8 Brian said:

Dec 19, 2016 12:05:08 GMT -8 Kami said:

Vertical-align is a depreciated tag and most browsers no longer support it.

To the best of my knowledge the valign HTML attribute is deprecated, but the vertical-align CSS property is not and still enjoys widespread use online so it's an acceptable solution in applicable cases.

Ah thanks for the correction, I had gotten the two confused.

[Alan Vende]

Thanks so much, Kami ! I had to tweak the top a bit, but it looks like it has worked. Does it look like it's in the center for you?

Thanks for the information, Brian!

[Kami]

It does not appear centred for me, but rather towards the right. This was tested from 400px in width to 5000px in width and it does not change.

[Tumbleweed]

Alan Vende ,

I fiddled with this on my test page .

What I'd do is give a position:relative; to your main div, the .AlanReikiMasterBG one and then put a div around that whole bit you are having issues with:

<div class="Alan_wrap">
<img class="AlanReikiMasterPic" src="http://storage.proboards.com/6033396/images/HLieDzT9jFyiBJTOYiJn.png">
<a style="color:#ffffff" href="http://psychic-psyghtings.proboards.com/user/1">
<p class="AlanReikiMasterDesc">Alan Vende<br>Reiki Master/Teacher</p>
</a>
</div>


And then some css for it:

.Alan_wrap{ position:absolute;top:0px; height: 240px;
width: 300px;
text-align:center;
}
.Alan_wrap img{width:150px;height:150px;padding-top:8px;
}

and totally remove any css for the class AlanReikiMasterPic and then use the padding on top in the img part to tweak it a bit vertically.


Just my two cents.

[Alan Vende]

Dec 19, 2016 18:57:12 GMT -8 Kami said:

It does not appear centred for me, but rather towards the right. This was tested from 400px in width to 5000px in width and it does not change.

It didn't appear centered to me either, Kami . I just wanted to get your opinion as a second opinion, but also to make sure eyes were looking at it correctly. I'm terrible at trying to make sure things are centered.

Thanks so much!

Dec 19, 2016 21:30:20 GMT -8 Tumbleweed said:

Alan Vende ,

I fiddled with this on my test page .

What I'd do is give a position:relative; to your main div, the .AlanReikiMasterBG one and then put a div around that whole bit you are having issues with:

<div class="Alan_wrap">
<img class="AlanReikiMasterPic" src="http://storage.proboards.com/6033396/images/HLieDzT9jFyiBJTOYiJn.png">
<a style="color:#ffffff" href="http://psychic-psyghtings.proboards.com/user/1">
<p class="AlanReikiMasterDesc">Alan Vende<br>Reiki Master/Teacher</p>
</a>
</div>


And then some css for it:

.Alan_wrap{ position:absolute;top:0px; height: 240px;
width: 300px;
text-align:center;
}
.Alan_wrap img{width:150px;height:150px;padding-top:8px;
}

and totally remove any css for the class AlanReikiMasterPic and then use the padding on top in the img part to tweak it a bit vertically.


Just my two cents.

I'm working on implementing it now, but I'm running into a problem with comments, for some reason. Thank you, Tumbleweed . I will be back when I get this fixed!

EDIT: I think that it worked. Does it look centered now? Thank you, Tumbleweed!

[Tumbleweed]

Nope, that is not centered to me but you left the css for .AlanReikiMasterPic in so you need to remove that. I'll check to see if everything else is right. It appears you have everything else o.k. except you didn't add the position:relative; to the class .AlanReikiMasterBG.

You need that position relative in that main div in order to use absolute positioning for the .Alan_wrap css and then you can change that to absolute as of now, you have it set to relative.

As far as comments, you mean to comment out css? That would be:

/*code here*/


So to recap, remove the css for .AlanReikiMasterPic (or comment it out) add position:relative; to .AlanReikiMasterBG and then change the position in the css in .Alan_wrap to absolute (positioning).

[Alan Vende]

Whoops. I had missed that part. Sorry. I'll remove it now.

From what I can tell, the code you gave positioned the image so it's centered on the page, not centered within the yellow portion of the div. I wanted it so my avatar's head was centered within the yellow portion of the div.

Sorry for the confusion!

[Kami]

Alan, what was wrong with the CSS i originally gave? It centres the image perfectly for me the way you requested.

[Alan Vende]

I'll put it back and show you what I was seeing. I wasn't seeing it centered in the div, rather centered on the page with margin: 0 auto;, so it's in the "true" (for lack of a better word choice) middle of the page. I'm not sure if we're looking at it the same way (same resolution, etc,) but it looked like it centered on the page, not the div, which is why I said I had to tweak it a bit.

I put your CSS back and here is a screenshot of what I'm seeing:



I was going by the div under it, which is centered on the page. It didn't look like the picture was centered with the div. Or does it and I'm just not seeing it correctly?

[Kami]

Okay so. You need to be more concise when you say "centred" because without specifying a direction that implies you want it, you know, completely centred.

The div is in the middle of the page and yes the image is horizontally centred. However picture is not centred in the div VERTICALLY because you specified you wanted to have the head "in the yellow part". simply adjusting the top margin to a bigger (for lower) or smaller (for higher) amount should move the image up and down. then separately adjust the top margin on the text if the spacing is off between the two elements.

If i am still not understanding you, then you need to use more precise language.

[Kami]

edit: if this post comes across as rude or snippy i apologise it's not about you (having a bad morning so my "polite" meter is a bit off)