css - 如何在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
}

中的 HTML .append：

$("#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 />');