Home Entrance Wiki Search Login Register

Welcome, Guest. Please login or register. - Thinking of joining the forum??
February 27, 2024 - @84.75 (what is this?)
Unread Topics | Unread Replies | Own Posts | Own Topics | Random Topic | Recent Posts
News: :ozwomp: Reminder: Forum messages stay readable for years! Keep yours high quality! :ozwomp:

+  MelonLand Forum
|-+  World Wild Web
| |-+  ✁ ∙ Web Crafting
| | |-+  ☔︎ ∙ I need Help!
| | | |-+  HELP: Text-alignments


« previous next »
Pages: [1] Print
Author Topic: HELP: Text-alignments  (Read 438 times)
dotmidi
Sr. Member ⚓︎
****


i have grown accustomed to your face...

iMood: dotmidi

View Profile WWW

First 1000 Members!Graduate '23Pocket Icelogist!Pet BatCool Dude AwardJoined 2022!
« on: February 27, 2023 @792.71 »

SO, we know the basic text alignment stuff, left right center..

what can I do to make my website directly centered onto a computer screen!

I uh,, excuse the website concept  :tongue: (LOL)

https://dotmidi.neocities.org/nightmare

see how the text is centered but its on the top of the screen?  :dunno: im not sure what element im supposed to use so the entire thing is smack-dab in the middle

thanks for ur time for reading this and im sorry for my lousy coding incompetence ive been trying to search for ages on how im supposed to code it to be in the very middle  :tongue:  :tongue:

Code
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>abandon all hope all ye who enter</title>
    <!-- The style.css file allows you to change the look of your web pages.
         If you include the next line in all your web pages, they will all share the same look.
         This makes it easier to make new pages for your site. -->
    <link href="/style.css" rel="stylesheet" type="text/css" media="all">
  </head>
  <body>
  <center>
<h3 style=margin-bottom:-35px> dotmidi's </h3>
<img src="https://blog.flamingtext.com/blog/2023/02/27/flamingtext_com_1677518836_883814215.png">
</center>
  </body>
</html>

Its already pretty basic so I think a simple explanation would be a LOT of help on how I can pull off something like that  :cheesy: I think it uh,, involves something to do with divs but im not quite sure.. maybe the float properttyy?? I don't know! just need a point in the right direction

EDIT: okay so im trying to do research on divs now and it seems like divs is the most effecient one to use for what im doing.. could someone elaborate more on how i could get it to center on the screen for Most Computer Screens ? (TM)
« Last Edit: February 27, 2023 @817.88 by dotmidi » Logged

bleh :p
isopod
Casual Poster ⚓︎
*


real life isopod

StatusCafe: niceopod
Matrix: Chat!

View Profile WWW

First 1000 Members!Joined 2022!
« Reply #1 on: February 27, 2023 @956.44 »

First off, the <center> tag is deprecated in HTML5. You should replace it here with <main>, or just a plain old <div>.

Looking at your page now, I see you've attempted a solution with absolute positioning. This isn't very good if you're going for perfect centering - it's not even centered on my display! Centering things in HTML is very confusing - in fact, you can't really do it with pure HTML - but there are a few ways to do it with CSS. The simplest is to just limit the width of your body and put margin: auto; on it like so:

Code
body {
    /* This can be any unit (e.g. 420px, 70%, 69vw, etc.) 43rem is just what I use. Try out different values! */
    max-width: 43rem;
    margin: auto;
}
In fact, this is what I use to center my website! It can only center horizontally, though.



My go-to method for vertical centering (which you can also see in action on my website) is using CSS Flexbox:

Code
/* This part forces the page to be the entire height of the window, so you can center things vertically.
   This is pretty much always necessary for Flexbox-based vertical centering. */
html, body {
    height: 100%;
}
/* Here's the flexbox. align-items here centers things vertically and justify-content centers them horizontally. */
body {
    display: flex;
    align-items: center;
    justify-content: center;
}

Now you can just stick everything else inside a div under the body (like you've already got) and you're done! Keep in mind this will center everything in the body, not just your div, so anything you want to position differently will need position: absolute; or similar. If this is what you want, you can also make it align the elements vertically instead of horizontally by adding:

Code
body {
    flex-direction: column;
}



You can actually do this with absolute positioning as well, but it's not quite how you've done it - I would replace the CSS on your main div with this:

Code
/* This applies to your main div, which I see in your page has the id "divElement". */
#divElement {
    position: absolute;
    left: 50%;
    top: 50%;
    /* Keep in mind the transform property doesn't have good support in really old browsers, if you care about that */
    transform: translate(-50%,-50%);
}

(Admittedly, I got this solution off Stack Overflow, but I've tested it and it works!)

This solution will apply to just your main div, but from my testing it's only good if you know that div is going to be shorter than the window.



You could also combine Flexbox with position: absolute; or margin: auto; (this is actually what I do), like so:

Code
/* This uses position: absolute; and transform to center the main div horizontally, and then Flexbox to center its contents vertically. */
#divElement {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
or
Code
/* Same as before, except with margin: auto; and a set maximum width instead of position: absolute;. */
#divElement {
    max-width: 43rem;
    margin: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

With accompanying HTML changes:

Code
<body>
    <div id="divElement">
        <div>
            Your content here
        </div>
    </div>
</body>



That's about all I got. Hopefully one of these works for you. IMO, centering things is probably the most disproportionately hard thing in web development for how basic and common it is, but it's pretty simple once you get the hang of it! In theory, all these methods will center your page on not just Most Displays (TM), but every display.

And just for fun, here's a secret forbidden centering method that you should never ever use:

Code
/* Everything about this is cursed as hell. Never do this. I am not liable if your computer explodes from using this. */
:root {
    --bw: 50rem;
    background-image: url("https://example.org/your-background-here");
}
html, body{
    height: 100%; 
}
body {
    width: calc((var(--bw) / 2) + 50vw);
}
#divElement {
    float: right;
    width: var(--bw);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
Logged

it is now real isopod hours
dotmidi
Sr. Member ⚓︎
****


i have grown accustomed to your face...

iMood: dotmidi

View Profile WWW

First 1000 Members!Graduate '23Pocket Icelogist!Pet BatCool Dude AwardJoined 2022!
« Reply #2 on: February 28, 2023 @103.22 »

MWA thanks for the help!  :chef:  This is great, i'm glad i'm not the only one who thought this was a bit challenging

the fact thers so many ways i could go about it too.. very crazy

This was very educational and informative, I definitley will be looking back at this every now and then when i have an issue like this again!  :tongue:
Logged

bleh :p
Pages: [1] Print 
« previous next »
 

Vaguely similar topics! (2)

What helped you code html/css easy?

Started by LIABoard ✁ ∙ Web Crafting

Replies: 17
Views: 1195
Last post October 11, 2023 @152.56
by lars
Melons critiquing and helping each other

Started by urgellxBoard ✎ ∙ Art Crafting

Replies: 10
Views: 485
Last post January 19, 2024 @801.90
by Melooon

Melonking.Net © Always and ever was! SMF 2.0.19 | SMF © 2021, Simple Machines | Terms and Policies Forum Guide | Rules | RSS | WAP2


MelonLand Badges and Other Melon Sites!

MelonLand Project! Visit the MelonLand Forum! Support the Forum
Visit Melonking.Net! Visit the Gif Gallery! Pixel Sea TamaNOTchi