Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Sean Mooneyham
Sean Mooneyham
10,392 Points

Cannot center multiple text boxes with each other.

I am working on a form just to get a better handle of html forms. I cannot for the life of me figure out how to get the <input type="text"> boxes to line up with each other for "name, address 1 and address 2"

Here is my html:

<fieldset> <legend align="center"><b>Personal Information</b></legend> <div class="center"> <label for="name">Name</label> <input type="text" id="name" name="user_name"> <br> <label for="address1">Address 1</label> <input type="text" id="address1" name="user_address"> <br> <label for="address2">Address 2</label> <input type="text" id="address2" name="user_address"> <br> </div>

    State
    <select id="state" name="user_state">
        <option value="empty"></option>
        <option value="md">MD</option>
        <option value="va">VA</option>
        <option value="dc">DC</option>

    </select>

    <label for="zipcode">Zip</label>
    <input type="text" id="zipcode" size="5" maxlength="5" name="user_zip">

    <br>
    <label for="email">Email</label>
    <input type="email" id="email" name="user_email">
</fieldset>
<fieldset>

and css:

body {

color: #610b0b;
background-color: #BCF5A9;
margin: 0;
padding: 0;
border: 4px solid #38610b;

}

h1 {

margin: 0 0 30px 0;
text-align: center;

}

h2 { text-align: center; }

form { text-align: center; }

input { padding: 5px; margin: 0 0 10px 0; }

state {

margin: 0 5px 0 0;

}

header { background-color: #088a08; border-color: #D7DF01; margin: 0 0 30px 0; padding: 5px 0 0 0; width: 100%; }

fieldset legend { margin: auto; text-align: center; }

fieldset { width: 100%; Height: 100%; border: 0; }

.center input {

text-align: center;

}

I've tried many different ways to make this happen (except tables), and nothing is working. I appreciate any help.

2 Answers

Sean Mooneyham
Sean Mooneyham
10,392 Points

Aaaand my post just failed.

idan ben yair
idan ben yair
10,288 Points

Hi Sean try to use

margin: 0 auto; Padding: 0 auto;

It will reset the automatic CSS settings and will most likely centralize your stuff :)

Let me know if that worked.

Also if you're trying to line up elements next to each other try:

Display: inline-block;