0

I am learning HTML and not able to align my HTML form in the center of the web page. Kindly help me resolve the issue. The HTML code is as follows:

<body>
<div style="border: 1px solid black; width: 400px; text-align: center;" 
align="center"> 
<form >
<!-- some code -->
</form>
</div>
</body>
Palak Jain
  • 319
  • 4
  • 11

7 Answers7

2

Add margin: auto; to your parent div style. text-align and align are not necessary there. Text-alignment will affect the alignment of your inner text not the container you are setting it too.

If you are trying to center a element with a known width then you should be using margin: 0 auto;.

If you are trying to center the content of an element (text, images etc.) then you should be using text-align: center.

Although it's possible to center block elements with text-align: center by settings it's display to inline (or inline-block) and using text-align: center on the container you probably shouldn't.

Check this link too to learn more about how margin works CSS Margins

Vasiliki M.
  • 372
  • 3
  • 12
  • As this person is learning HTML and CSS, you should explain *why* this works. – Brad Jun 24 '17 at 16:59
  • I was actually adding a link with more info the moment you wrote it. – Vasiliki M. Jun 24 '17 at 17:01
  • What you linked to doesn't explain why `text-align` isn't the correct property. Some explanation for the specific scenario, in your answer itself, would be helpful. – Brad Jun 24 '17 at 17:04
  • Thanks for the comments. Updated. – Vasiliki M. Jun 24 '17 at 17:10
  • `text-align` into `style` is the same with simple `align` into `div`, it doesn't make a difference. `text-align` is more in common in general, as `align` is kind of outdated, but still used in several cases. But using both is needless. – Vasiliki M. Jun 25 '17 at 09:01
1

Remove align center from div tag and use center tag before form and close it after form .If it is not working do a reply.FYI don't use div width in pixels please use it in percentage like 100% .If u use in pixels u may face problems when u switch to other devices like mobile to desktop ...

Sumith Chalil
  • 348
  • 3
  • 22
0

I believe you are looking for
this

<style>
.center {
    margin: auto;
    width: 400px;
    border:1px solid black;

}
</style>
<body>
<div class="center"> 

<form >
<!-- some code -->
</form>
</div>
</body>
Minar Mnr
  • 1,376
  • 1
  • 16
  • 23
0

at first set width property to absolute unit(px, cm etc) or relative unit(rem, em, %) then use margin-left:auto; and margin-right:auto;

Why this work ? Because after you set the width of block level element browser(user-agent) can make calculation, i.e. assign exact value to auto placeholders such as:

freeSpace = parentElementWidth - childBlockLevelElementWidth;
auto = freeSpace/2;
Elnur Shabanov
  • 69
  • 3
0

To achieve expected result, use below option of flex items

Below mentioned will center the content vertically and horizontally

align-items: center; // align-items will center content horizontally
justify-content: center;// justify-content will center content vertically

Note: To make justify content vertically center, define html and body full screen height 100%, as by default html,body height is auto which will not cover entire screen

CSS: 

html, body{
  height:100%;
}

body{
  display:flex;
  align-items: center;
  justify-content: center;
  height:100%;
}

Codepen for reference - https://codepen.io/nagasai/pen/JJrPRM

Naga Sai A
  • 10,771
  • 1
  • 21
  • 40
0

Also you can do like this inside form tag specify style="padding-left:200px" but thats not a good way while designing a website

Sumith Chalil
  • 348
  • 3
  • 22
0
  1. the body tag has a default width of 100%.
  2. you don't really need the div tag although it's not hurting anything
  3. setting width to 50% on the form tag and adding margin:0 auto centers the form
  4. adding text-align:center centers the input field

<body style='border: 2px solid black;'>

 
<form style='border: 2px solid red;width:50%;margin:0 auto;text-align:center'>
<!-- some code -->
   <input type='text'>

</form>

</body>
DCR
  • 14,737
  • 12
  • 52
  • 115