How to Center Input Fields in a Div?

HTML & CSS
1

I’m making a login/register sytem, and I want to center the input fields in the div. Here’s the code of the login form:

<body style='font-family: Times New Roman, verdana, sans-serif;'>
	<div style='width: 70%; padding 10px; border: 5px solid #316ED6; background-color: #648CD1; color: #31D8EB; margin: auto; text-align: center;'>
		<h1>Register Now!</h1>
		<br />
		<form action='' method='post'/>
			<table>
				<tr>
					<td>
						<b>Username:</b>
					</td>
					<td>
						<input type='text' name='username' style='padding: 4px'/>
					</td>
				<tr>
					<td>
						<b>Password:</b>
					</td>
					<td>
						<input type='password' name='password' style='padding: 4px'/>
					</td>
				</tr>
				<tr>
					<td>
						<b>Re-enter Password</b>
					</td>
					<td>
						<input type='passsword' name='passwordconfirm' style='padding: 4px'/>
					</td>
				</tr>
				<tr>
					<td>
						<b>First and Last Name:</b>
					</td>
					<td>
						<input type='text' name='name' style='padding: 4px'/>
					</td>
				</tr>
				<tr>
					<td>
						<input type='submit' name='register' value='Complete Registration'/>
					</td>
				</tr>
			</table>
		</form>
		<h4>Already own a Connection account? Login <a href='index.php'>Here!</a></h4>
	</div>
</body>

A clear, simple answer would be great :^)

2

Have you tried td {text-align: center} ?

I’m not going to talk about how obsolete is your code because I guess there is a good reason to use a code that looks more like from the 90’s

1 Like
3

Staying consistent with what you have already, you could add an inline style to your opening <table> tag:

<table style="margin: 0 auto;">

But usng inline styles like that is way out of date, as is using a table for layout. At least consider moving all your styles into an external style sheet, or into a style section in the document head:

<style>
table {margin: 0 auto;}

div {width: 70%; padding 10px; border: 5px solid #316ED6; background-color: #648CD1; color: #31D8EB; margin: auto; text-align: center;}
</style>
4

I was following a tutorial dating a couple years ago, so I followed his table. I’m not so great with using display values to organize forms, it would be great if you would give me an example of being able to organize in an up-to-date way.

5

I can’t do that because these are input fields, and only the heading tags get centered. I followed a tutorial dating back a couple years, which explains the organization method. I’m not strong with using display values, but it would be great if you can show me how.

6

Well, if the tutorial was related to e-mail marketing where the obsolete and rubbish code is still used, I guess it is OK. If that’s not the case, then I don’t give it too much credit.

What do you mean with this?

7

Hi there MLG_Growtopia,

try it like this…

[code]

untitled document body { font: 1em/1.62em verdana, sans-serif; background-color: #f0f0f0; } form { max-width: 58em; padding: 1em; margin: auto; border: 0.25em solid #316ed6; background-color: #648cd1; color: #31d8eb; text-align: center; } form fieldset { border: 0.1em solid #31d8eb; } form legend{ display: none; } form div { margin: 1em 0; } form label,form input{ display: inline-block; width: 12em; } form input { padding: 0.25em; }

Register Now!

Username:
Password:
Re-enter Password:
First and Last Name:
Already own a Connection account? Login Here!
[/code]

coothead

3 Likes
8

For example, nowadays, we use things like “display: block” or “display: inline” to position and organize the structure of a web page. I’m not very good with that stuff.

9

MLG_Growtopia,

In your opening post, you state:

Then you give some very outdated code and close with

In other posts you state

and again

@coothead provided an excellent rendition of the form but you did not acknowledge it which leads me to believe that your question is not about the form but about understanding basic HTML elements and CSS properties and their behaviours.

Although you mention “nowadays”, you are asking about fundamental HTML and CSS that have been around for years. My favorite reference for basic HTML4.01 and CSS2.1 (which are the things you seem to be concerned about) can be found here:
http://reference.sitepoint.com/css
Other quality references can be found on the web.

Semantics can play a role in the decision to modifiy the display property of an element as can the desired behavior of the element. If semantically you need to use a <div> but behaviorally you need a <table>, then change the default display characteristic of the <div> (which is {display:block} by default) to <table> by assigning {display:table} to the <div>and it will behave almost exactly like a <table>. The same applies to <span>, <ul>, and other HTML elements.

If my interpretation of your concern is wrong, then perhaps you need to restate your question in such a way that the question will be clear and simple. Use different words, add new information…

It might be helpful if you post a link to the tutorial that you are using and it might helpful if you post an annotated drawing of the form so you can be clear about where you attention is focussed.

4 Likes
10

Use the attribute padding to center your input field. The padding is deals with internal space of a div.

11

@Homebrands, the padding attribute has been obsolete for years and was replaced by the CSS padding property. Padding is not likely to be the best technique to use to center an element within a div. {text-align:center} on the div will center inline and inline-block content; {margin:0 auto} on block content will center that content. Both of these techinques are fluid and provide a good basis for responsive design. Neither method relies on padding.

1 Like
12

I guess using padding could “work” but it would be extremely fragile.

For example, if I had a containing element and I knew it had

[ . . . so many words in it . . . ]

I could play with the values until it looked centered to me. BUT …What if
the content changed?
the font-family changed?
the font-size changed?
a different computer was used?
etc etc.

And how would the changes affect the layout of neighboring elements or even the entire page?

I think padding can work OK for giving some clearance from a side or more, but I wouldn’t use it to center.

13

I think that you have your concepts wrong. HTML provides structure, the architecture we use to display content. CSS doesn’t structure anything, just presents it and help us to make it look beautiful.

@ronpat has giving you excellent counsel. I suggest that you read that guide, experiment and ask what you don’t understand.

1 Like
14

Yeah, I used coothead’s code and made some small modifications to solve my problem. I learned a huge ton from him by inspecting his code and looking up every bit of it. Thanks for your honest advice, it helped me get back on track with my structuring :^)

1 Like
15

Just read coothead’s and ronpat’s posts and now am back on track with structuring with HTML and CSS. Thanks for your additional clarification about CSS.

2 Likes
16

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