Center elements and make the fields larger on a window

Question

I have the following markup in a simple html page.

<div>
    Name: <input id="nameInput" type="text" />
</div>
<div>
    Amount: <input id="numberInput" type="number" />
</div>
<input id="getConverted" type="button" value="button" onclick="performConversionAndDisplayResults();" />
<textarea id="resultOutput" rows="2" cols="20"></textarea>

I need to achieve the following

• Center the items on the browser window
• Make the items larger as you see in current web sites
• Make the textarea span the whole width

What is the best way to do this, I have seen a number of solutions but wannt to know the best approach.

Answer 1

With CSS:

div
{
    margin: 0 auto;
    font-size: 30;
}

For the third one, not sure exactly how you want it, but I would recommend looking here.