CODEWITHSUNDEEP
htmlcss
Alexander Capone
Alexander Capone

Reputation: 548

CSS style for positioning inputs

I want to make a part of a page where I have five input[type=text], but I need to put them in specific way, like on this picture:

Example layout

I have tried to do something with the display property, but it did not work.

Also I do not want to use rough typing left and top properties.

Upvotes: 0

Views: 280

Answers (1)

John
John

Reputation: 7329

It looks like you just want your form centered in an element. Centering can be done easily since input elements are default to display: inline-block all you need is for their container to have text-align center for them to center.

Here is some example code. You can make the container however big and it will center. You can adjust the margins as well

html

<div class="centerForm">
    <div class="centerForm-row"><input type="text"/> <input type="text"/></div>
    <div class="centerForm-row"><input type="text"/> <input type="text"/></div>
    <textarea/>
</div>

css

.centerForm {
    text-align: center;
}

.centerForm-row {
    margin: 30px 0;
}

.centerForm-row input {
    margin-left: 40px;
}

.centerForm-row input:first-child {
    margin-left: 0;
}

here's a fiddle

Sorry if this wasn't what you wanted, but feel free to comment.

EDIT:

So to solve your problem in the comments of this going in to one column you can do one of two things. Click on A). and B). to get full screen demos of the seperate designs.

A). Make your container have a min-width. This forces a horizontal scroll bar at smaller widths, but keeps your elements in all the same style.

B). Just let the inputs go on to two lines, but use a media query to make sure it's made to look like it was meant to be one column.

A).

Here is the added css for A). (The HTML stayed the same for both examples.)

.centerForm {
    text-align: center; /*This was here before*/
    min-width: 400px; /*This is the only added style*/
}

Here is an editable JsFiddle of A).

B).

Here is the added css for B).

@media (max-width: 400px) { /*applies when screen is less than 400px*/
    .centerForm-row input {
        display: block; /*this forces it on to multiple lines preemptively*/
        margin: 0 auto; /*this centers display block elements*/
        margin-top: 15px; /*this is just for style*/
    }
    .centerForm-row input:first-child {
        margin-top: 0; /*just for style*/
        margin: 0 auto; /*must be here to override margin-left: 0 from the rule .centerForm-row input:first-child above*/
    }

}

Here is an editable JsFiddle of B).

Just comment again if you have any more questions. Hope this helped. :)

Upvotes: 1

Related Questions