[GIS] Image won’t center in Leaflet pop-up

Question

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

Answer 1

try

.leaflet-popup-content img { margin: 0 auto; display:block; }