如何在jquery mobile中居中图像？

Question

我正在为我的移动应用程序使用jquery mobile，但是在让我的图像正确居中方面遇到了问题。从图像中可以看出，与右侧相比，图像左侧有更多的空白区域。对于页面上的所有图像，这种情况始终如一。

有关详细信息，不那么宽的照片似乎居中，但我确信这些照片的左/右空间也有一些差异。只有更广泛的图像才会变得明显。

有关如何解决这个问题的建议吗？

            $("#allpictures").append('<div class = "img_center"><div><img src = "'+item.url+'"></div></div><p style = "margin-left:10px; margin-right:10px; font-size:15px;">'+item.title+'</p><br/>');

    <style>
        .img_center {
            text-align:center;
        }
        .img_center * {
            margin: 0 auto;
        }
    </style>

Answer 1

使用此CSS，并移除style上的内联<p>属性。

.img_center{
    text-align: center;
    width: 100%;
}
.img_center img{
    display: block;
    margin: 0 auto;
}
.img_center p{
    margin: 10px;
    font-size: 15px
}

.append中的HTML：

$("#allpictures").append('<div class="img_center"><img src="'+item.url+'"></div><p style="margin-left:10px; margin-right:10px; font-size:15px;">'+item.title+'</p><br />');