Can't Center Map about us-map HOT 4 OPEN

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;
}

from us-map.

Thanks CaptainStack!

from us-map.

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;
  }

from us-map.

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!

from us-map.