SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do I center all the content in this box?

    I want to center the map and all the content on this page: http://localdigitalnow.com/bistro/location.html

    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>

    <a href="http://maps.google.com/m/local?q=Macrossan Street, Port Douglas QLD 4877" rel="nofollow">Click to View on Google Maps</a>
    <a href="http://maps.google.com/m/local?q=Macrossan Street, Port Douglas QLD 4877" rel="nofollow"><img src="http://maps.google.com/maps/api/staticmap?center=Macrossan 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" /></a>
    <div class="form">
    <form id="form1" method="get" action="http://maps.google.com/m/directions" onsubmit="return checkSelection('form1');">
    <fieldset>
    <input type="hidden" name="daddr" value="Macrossan Street, Port Douglas QLD 4877" />
    <ul>
    <li><label>Directions: Enter Your Start Location</label><input name="saddr" type="text" class="input" /></li>
    </ul>
    <input type="submit" name="submit" class="button" value="Get Directions" />
    </fieldset>
    </form>
    </div>
    </div>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,831
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    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.

    e.g.

    Code:
    .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;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •