Vertical alignment in html

BOOBALAN.V
5StarLounger
Posts: 737
Joined: 24 Aug 2017, 07:43

Vertical alignment in html

Post by BOOBALAN.V »

Dear Community,

How to align my sign in form in middle of the page. I have created the header, main and footer tag. I want to align the sign in form in middle of the page. Kindly help me. Now only I am trying to design. Here I have given the code which I used. Its not working. So please help me.

Code: Select all

<main style="text-align:center">
      <style>
        .center{
          margin: auto;
          width: 50%;
          padding: 10px;
          vertical-align:middle;
        }
      </style>

        <div class="center">
          <left>
          Enter User Name/ID:
          <br><br><br>
          Enter Password:
          <br><br><br>
          <button type="button" name="Home_Login"><b>Login</b></button>
          </left>
        </div>
          </main>

User avatar
HansV
Administrator
Posts: 78236
Joined: 16 Jan 2010, 00:14
Status: Microsoft MVP
Location: Wageningen, The Netherlands

Re: Vertical alignment in html

Post by HansV »

Here is an example:

Code: Select all

  <main style="text-align:center">
    <style>
		.center{
			width:300px;
			height:200px;
			position:absolute;
			left:50%;
			top:50%;
			margin:-100px 0 0 -150px;
		}

      </style>

        <div class="center">
          <left>
          Enter User Name/ID:
          <br><br><br>
          Enter Password:
          <br><br><br>
          <button type="button" name="Home_Login"><b>Login</b></button>
          </left>
        </div>
  </main>
Best wishes,
Hans

BOOBALAN.V
5StarLounger
Posts: 737
Joined: 24 Aug 2017, 07:43

Re: Vertical alignment in html

Post by BOOBALAN.V »

Thanks for your kind reply sir. I can understand div container. But I couldn't understand clearly page layout sir. How to allocate space for header, main, sidebar, footer. Even header itself how to divide the spaces like how much I want left, right, middle, etc. Kindly tell me sir to learn page layouts in simple way and simple examples. For all device width also sir. Once again thank you sir.

User avatar
HansV
Administrator
Posts: 78236
Joined: 16 Jan 2010, 00:14
Status: Microsoft MVP
Location: Wageningen, The Netherlands

Re: Vertical alignment in html

Post by HansV »

I'm not an expert in HTML, so I cannot help you with this.

I usually look here when I want to learn something about HTML.
Best wishes,
Hans

BOOBALAN.V
5StarLounger
Posts: 737
Joined: 24 Aug 2017, 07:43

Re: Vertical alignment in html

Post by BOOBALAN.V »

Thanks for giving this link sir. Its very useful.