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 />');