Hack Forums
Odd Centering Issues - Printable Version

+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: Odd Centering Issues (/showthread.php?tid=5419981)



Odd Centering Issues - SIM-2306826 - Sep 29, 2016

So I'm working on something at the moment, and I'm trying to center the logo, subtext, and the input form in the middle all in line. It seems as though the centering is off and I can't seem to figure out why.

Any ideas?

http://tantihf.me/test/


* - Two-Ton 21 - Sep 29, 2016

If you mean your logo isn't pushing down, it's not inside your content wrapper. I'd put a margin on top of both input elements for better spacing and response as-well.


* - SIM-2306826 - Sep 29, 2016

Not vertically buddy. I mean the logo centering in line with everything, and also the subtext under it. Does it seem centered to you? It may just be my eyes tricking me.


* - Two-Ton 21 - Sep 29, 2016

On chrome and Android, it looks fine. Maybe it's your device?


* - SIM-2306826 - Sep 29, 2016

I think it's just my eyes I guess, thanks :)


* - Dostoevsky - Sep 30, 2016

It may not look exactly centred but that's down to your font choice (variable-width fonts tend to look slightly off sometimes).
In terms of your actual HTML & CSS, I recommend not relying on a <br /> and instead using a <h1> around your logo "Bags" and some block container for your little sub-text.


* - ⁠Cammy - Oct 1, 2016

I don't know about you, but the only thing that looks off to me is the black bar.

Click to enlarge
[img=999x570]http://715.wf/sharex/images/png/YHOKC.png[/img]

Occurs on Opera, Edge and IE. Have not tested Firefox or Chrome.


* - SIM-2306826 - Oct 1, 2016

What size monitor are you using? That's a bit odd.


* - ⁠Cammy - Oct 1, 2016

(Oct 1, 2016 02:10 PM)Tanti Wrote:  What size monitor are you using? That's a bit odd.

15.6 inch 1080p laptop


* - SteezyHB - Oct 2, 2016

doesn't seem off to me, and it is centered correctly;
[Image: 0b073f66e2ddfe198aa303589c8394f1.png]

What you could perhaps do is show the continue button below the input, but I don't think that would look very much better.

I like the way it is, very simple and clean.


* - SIM-2306826 - Oct 3, 2016

I'm confused by what the black bar is you guys are seeing. I do not see that..


* - Rushax - Oct 3, 2016

I have a smaller screen than most and its showing a scroll bar for that page.
Set the #gradient{
height: 100%;
}
instead of 800px as it's far better allround for user experience :)


* - SIM-2306826 - Oct 3, 2016

It is set to 100%, can you show me where it says 800px still?


Never mind. Figured out why. Thanks, it was caching.