How do I center all the content in this box?

I want to center the map and all the content on this page:

What would be the best way to do this?

<div class=“box”>
<p><b>Macrossan Street</b><br/ >
<p><b>Port Douglas QLD 4877</b></p>

&lt;a href=" Street, Port Douglas QLD 4877" rel="nofollow"&gt;Click to View on Google Maps&lt;/a&gt;
&lt;a href=" Street, Port Douglas QLD 4877" rel="nofollow"&gt;&lt;img src=" Street, Port Douglas QLD 4877&zoom=14.5&size=250x270&maptype=roadmap&markers=color:red%7Clabel:A%7C25 Mason St San Francisco, CA 94102&sensor=false" alt="View on Google Maps" /&gt;&lt;/a&gt;
&lt;div class="form"&gt;
&lt;form id="form1" method="get" action="" onsubmit="return checkSelection('form1');"&gt;
&lt;input type="hidden" name="daddr" value="Macrossan Street, Port Douglas QLD 4877" /&gt;
&lt;li&gt;&lt;label&gt;Directions: Enter Your Start Location&lt;/label&gt;&lt;input name="saddr" type="text" class="input" /&gt;&lt;/li&gt;
&lt;input type="submit" name="submit" class="button" value="Get Directions" /&gt;


The easiest solution would be to give .box a width and use auto margins to centre the box and add text-align:center to center the inner text content.


.box {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #A41A0C;
    border-radius: 0.938em 0.938em 0.938em 0.938em;
    margin: 7px auto;
    padding: 5px;
    text-align: center;
    width: 400px;