How to center a form?

HTML & CSS
1

I have a form which is just a button inside of a div that represents a box.

How can I center the form - and thus the button - inside the parent div box?

2

Hi there UpstateLeafPeeper,

does this help…

UpstateLeafPeeper.zip (1.7 KB)

coothead

1 Like
3

All I needed was this line…

.subscription form {
    text-align: center;
 }

:stuck_out_tongue:

I was wondering if that might work, but that sure is a weird attribute for centering an object?!

4

The text-align: center attribute centers inline-elements
such as text, span, img, inputs etc.

The margin: auto attribute centers block-level elements
such as div, p, h1 - h6 ,ul, li etc.

We are talking here about horizontally, of course. :winky:

coothead

5

Then I don’t follow why that works, because I have…

<form id="123offer" action="" post="">
  <fieldset>
    <input type="submit" name="chooseOffer" class="button" value=Get offer" />
  </fieldset>
</form>


form#123offer{
  text-align: center;
}
6

Hi there UpstateLeafPeeper,

The form element is a block-level element and
as such text-align: center; applied to it will
horizontally center all inline elements that happen
to be within it’s confines. :winky:

Also note that there is no need for /> inHTML5. :wonky:

coothead

7

So you can apply text-align: center to block-level elements, and if they have child inline elements then it will apply?

I’m not even sure what my site is written in?! :blush: I think it is coded in HTML4…

Thanks!

8

Hi there UpstateLeafPeeper,

form {
   max-width: 64em;
   margin: auto;
 }

…wil horizontally center the form in the page.

form {
    max-width: 64em;
    margin: auto;
    text-align: center;
 }

…will horizontally center <input type="submit">
within the confines of the form element

Start coding in HTML5 , it is now the norm.

Here is the very basic layout…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

</head>
<body> 

</body>
</html>

coothead

9

Okay, gotcha!

Unfortunately my site is written in whatever?? so I’ll have to live with that for now. But for v2.0 I will upgrade to HTML5 and CSS3 or whatever is the latest.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.