I Apologize in Advance.....Vertical Centering and Scaling in CSS.........I Know

HTML-CSS
1

Hello Everyone,

I know that questions similar to this one have been asked a million times but, after hours pouring through forums, CSS Tricks, etc., I cannot find a solution that works. I know that it is likely my noob understanding of CSS element alignment in general that is the issue but I have honestly tried multiple solutions with no success so I was hoping one of you “way better at this than myself” people could point me in the right direction.

I am practicing making a login page that contains only a logo image, input fields for UN and PW, and a login button. I have gotten everything to center both horizontally and vertically but I am sure the way that I have done it is less than elegant and it doesn’t resemble any of the solutions that I have been reading online. Also, I cannot seem to get the contents to scale with the window size.

Can you guys take a look at my code and let me know what the best way to center all elements on the login page both vertically and horizontally, and have them scale with window size would be? Like I said I have Googled for hours and each search reveals several different ways to do things, none of which actually worked when I tried it (because of my lack of understanding, not the solution I’m sure), and its just kind of overwhelming.

Thanks to anyone who may be able to provide some advice/insight!!

Ant

<div class="logo">
    <img src="FwF2.png" alt="FwF Logo">
  </div>
  <div class="nav">
    <div class="inputFieldLabels">
      <p>Username</p>
      <input type="text" name="Username" value="">
      <p>Password</p>
      <input type="password" name="Password" value="">
    </div>
    <div class="button">
      <button type="button" name="Login">Login</button>
    </div>
  </div>

  .inputFieldLabels, .logo {
      text-align: center;
      font-family: "Lucida Console" , monospace;
    }

  .button {
      text-align: center;
      margin-top: 20px;
      font-family: "Lucida Console" , monospace;
    }

body {
      background-color: black;
    }

  p {
      color: white;
    }

img {
      padding-top: 100px
    {

12%20AM
12%20AM1918×975 137 KB

2

During those hours of Googling, did you come across Flex-box or CSS-Grid…???

3

Hi @phoenixabhishek ,

I did and I tried the flex method after practicing with the FlexFroggy website and looking at a couple of blog posts. I created a parent div with a class of content and tried to style like this:

.content {
display: flex;
align-items: center;
}

Unfortunately that did not work. I removed the 100px padding from my img element before applying those rules and all my content was moved to the top of the page.

4

if u want to make vertical align element u can use

vertical-align property and can give “top”, "bottom, “middle”.

and if u want to make horizontal center make “text-align:center” . this works for inline-elements if u give to containing element.

you can also use margin:auto for block elements for block elements if fixed width is provided.

1 Like
5

Hi Network_Ninja, your website looks nice! A fishing trip in my country, yes!

I’ve looked at your code and I think there are a couple of things you could improve. Building your own stuff is a great way to learn, so I suggest you use it well. I learned a lot from working on a real website. And I’ve used Google for many hours, like you.

Here’s some advice about your code:

You are using a form, without calling it a form. I suggest you look up <form>, <fieldset> and <label> (https://www.w3schools.com/tags/tag_form.asp).

You might want to replace some code and add some as well. You don’t need div’s there.

I found forms very hard to learn from examples, until I made my own. That was when it “clicked” in my mind. :slight_smile:

About the img: you could use it without the div around it. But img is an inline-block and you might want to change that to display: block; You can give the img the id of logo.

Same for button. No need for a div there. Button is a block, so it will behave just like a div.

And how about a nice box around all your stuff? And as it is the main content on this page, you could use <main>.

And with that you could get rid of all the div’s.

Then look up margins to get things in the middle (horizontally) of the <main>. And to get <main> in the middle of the viewport.

There is a nice piece of code for that, you’ll find it. :slight_smile: I use it all the time.

There is no code for the vertical alignment, except flexbox or grid which are both advanced css, but you might not need that. On a small screen your visitors might have to scroll, but so what?

Good luck!

1 Like
6

@rabi-999 - Hi Rabi and thank you for the response and advice! I did try several of the methods that you mentioned but I could not get them to work but as I stated I think this is because, as @Joke pointed out in his response, I need to go back and review block vs. inline vs. inline-block elements and how they affect one another.

@Joke - Thanks so much for the detailed response! I am familiar with the form and label elements and did a couple of projects using them on Codecademy. I am not familiar with the fieldset elements so I will definitely go back and look at that one. As you pointed out, I had a feeling that some of my div were not needed and I did remove some of them at one point but the alignment that I had previously achieved got messed up when I did so. It is clear to me now that this was because I was aligning things based upon the div classes and that got broken when I removed the div elements. I think at this point I will go back and think through this logically and try to come up with a better structure for the HTML document. I will post an update here when I come up with a better solution.

Yes, this site is going to be used as a repository for images and videos for a fishing trip to Oude-Tonge in May:) I have been to the Netherlands once before and it is a beautiful country. I am really excited about visiting again:)

Okay, so as I said I will re-work the site based on the suggestions that you and @rabi-999 have given me and will post again here when I have a better solution.

Thank you to both of you!

1 Like
7

@Joke @rabi-999 I forgot, what about scaling the contents to fit the browser window? Do you have any good methods I can try for that?

8

:+1:

Use bootsrap for responsive fluid scaling because it manage automatically.

But if u want to learn please take a course which is already available as responsive design in freecodecamp.

the most important thing is width of block elements that can be given in percentages, you can use max-widths , flex , grids .

i suggest you to take course because if u go random you get confuse for sure

2 Likes
9

That’s because by default flexbox sets the main axis (the flex-direction) to be horizontal or ‘row’. In your case you want it to be vertical. This should work.

body {
      margin: 0;
      min-height: 100vh;
      background-color: black;
      display: flex;
      flex: 1;
      justify-content: space-around; // or center
      align-items: center;
      flex-direction: column;
    }

That said, the way you centered everything is perfectly fine I think.

1 Like
10

If you use flex-direction: column; you have to be certain none of the visitors use an old browser, like IE or Safari on an iPad 2 or something like that. Those browsers aren’t always capable of calculating the right size of the boxes in the column and can get everything messed up.
In the website I built my footer ended up on top. :slight_smile:

11

@Joke Okay I had to take a couple of days off but I finally got back to my code. I think I have made it more efficient and was able to center the elements better this time around. I was lacking a basic understanding of containers, centering the contents of a container as opposed to the container itself, etc. What really helped to visualize things was to add a background color to all of my elements. That showed me the shape of its box or the shape of the parent element’s box and made it easier to understand how the code would affect the positioning of the elements. Everything is now centered both vertically and horizontally as I want it.

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>🎣FwF🎣 - Holland</title>
</head>

<body>

  <style media="screen">

    input {
      font-family: "Lucida Console" , monospace;
      font-weight: bold;
    }

    button {
      font-family: "Lucida Console" , monospace;
      font-weight: bold;
      border-radius: 5px;
    }

    body {
      background-color: black;
    }

    p  {
      color: white;
      text-align: center;
      font-family: "Lucida Console" , monospace;
    }

    .imgCenter {
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-top: 85px;
      width:50%
    }

    .btnCenter {
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-top: 25px;
      width:4%

    }

    .inputCenter {
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-top: 10px;
      width:7%
    }

    .form {
      margin-top: 50px;
    }

  </style>

  <img src="FwF2.png" alt="FwF Logo" class="imgCenter">

  <div class="form">
    <div class="input">
      <p>Username</p>
      <input type="text" name="Username" value="" class="inputCenter">
      <p>Password</p>
      <input type="password" name="Password" value="" class="inputCenter">
    </div>
  </div>

  <div class="button">
    <button type="button" name="Login" class="btnCenter">LOGIN</button>
  </div>

</body>

</html>
2 Likes