1

I am using Leaflet to create a map of points (from geojson) that will open a picture and text under the picture. The text is centered, but I am having trouble centering the picture. This seems like something I should be able to do simply. Suggestions?

    var places = L.geoJson(CLusers, {
    pointToLayer: function (feature, latlng) {
            return L.marker(latlng, {icon: placesIcon})
            },
    onEachFeature: function (feature, layer) //functionality on click on feature
        {
        layer.bindPopup("<p><a href=" + feature.properties.website + "><img src=" + feature.properties.pic + " ></a></p><p><strong>" 
            + feature.properties.name 
            + "</strong></p>" 
            + feature.properties.description, customOptions);
        }               
    });

CSS styling:

    /* popup */
    .leaflet-popup {
          position:absolute;
          text-align:center;

      }
    .leaflet-popup-content-wrapper {
          padding:2px;

      }

     .leaflet-popup-content {
        max-width: 100%;
        max-height: 100%;
        overflow: auto;
        text-align:center;
        img-align: center;
    }

1 Answer 1

2

try

.leaflet-popup-content img { margin: 0 auto; display:block; }
2
  • I'm not sure why, but adding this doesn't appear to change anything in my map.
    – juturna
    Jul 15, 2015 at 14:18
  • can you post the full code, as a jsfiddle, plunkr or similar?
    – toms
    Jul 15, 2015 at 15:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.