Question

I have another small problem with centering elements. I thought about the previous questions that I’ve asked, but I can’t seem to find the answer on this problem. I have the following example code to demonstrate my problem.

<div id="main" style="width: 960px;">
    <form>
        <label>Test</label>
        <input type="text" value="Test" id="inputfield" />
    </form>
    ....
</div>

Now I tried to treat it as a block-element using width and margin to position it correctly, but somehow it failed. Do I need to use an id field or is it recommanded that I put a div around every input text field (using #main input[type=text]{...})?

Answer 1

For this case, the best way would be assigning specific rule as per the id #inputfiled

Add this in the CSS ^Demo

#inputfield { display: block; margin: 0 auto; }

Relying on attribute selectors like input[type="text"] is very risky in terms of cross-browser compatibility.

---

Updates

In case you want to center all input elements, but not other, you can use a name selector

input,select,textarea { /* These three elements round up all the input types */
    display: block; 
    margin: 0 auto; 
}