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 {

    .leaflet-popup-content-wrapper {


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


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