Can't Center Map

[eweisbrot]

Hello,

I'm attempting to center my map using a css centering class that works for text and images, but some reason isn't working on the map. I'm using: class="text-center".

Please see the page below:

http://199.119.123.135/surety-bonds/commercial-bonds/auto_dealer_bond_map.htm#requirements

Any ideas? Thanks!

[CaptainStack]

text-align: center only works on inline elements. This map is housed in a div which is a block element. You need to do this:

.text-center {
    margin-left: auto;
    margin-right: auto;
}

[eweisbrot]

Thanks CaptainStack!

[kjrhody]

The SVG also has a lot of extra whitespace on the right, so I did it this way to reduce that (if making the background a different color) as well as centering.

 #map {
      margin-left: auto;
      margin-right: auto;
      height: 40em;
      width: 80%;
  }
  svg {
      background-color: #fff;
      width:80%;
      margin: auto;
      display: block;
  }

[zabackka]

After creating the map object, set the viewBox attribute to "0 0 921.66444 291.33102"
This should trim all the unnecessary whitespace, although I haven't tested it with the state labels turned on.

$( "svg" ).attr("viewBox", "0 0 921.66444 291.33102");

Good luck!