循环浏览所有图像标题并将文本对齐方式更改为左对齐还是居中对齐？

Question

我已经使用W3Schools模态灯箱中的代码创建了一个图片库。我对其进行了一些更改以使其适合我的需求，例如。我在单独的php文件（photography.php，3dmodels.php等）中列出了图像，然后将其包含在图库php文件中。同样，字幕文本不是从alt而是从div提取的。图片库可以正常运行（无论如何在Chrome中）。

在大视图中打开图像时，标题居中，而当文本多于一行时，看起来很难看。文本向左对齐也不好，因为某些垂直图像较窄。那么，当文本多于一行时，如何使标题向左对齐，而当文本多于一行时，如何使标题与中心对齐？

画廊有5个类别（#gall_valittu），共有103个带标题的图像（#caption_text）。我尝试了一个“ for循环”，现在尝试了两个循环。实际jquery插件（.actual（outerHeight））用于获取整个文本的高度。我也遇到那个问题，但是这个选项似乎有帮助。

$(document).ready(function() {
    var caption_div = $("div#gall_valittu"); // Gives 5 divs
    for (var z = 0; z < caption_div.length; z++) {
        var tekstit = $("p#caption_text"); // Gives 103 images
        for (var y = 0; y < tekstit.length; y++) {
            var caption_area = $("#caption");
            //var caption_txt = $("p#caption_text");
            var area = caption_area.outerHeight();
            var txt = $("p#caption_text").actual("outerHeight"); //jquery.actual.min.js !!!
                if (txt < area) {document.getElementById("caption_text").style.textAlign = "center";}
                else {document.getElementById("caption_text").style.textAlign = "left";}
        }   
    }
});

我的问题是我无法使“ for循环”正常工作。它在第一个图像之后停止。但是，它使文本正确对齐。我尝试了没有if语句的情况，以查看for循环是否有效，并且无效。我不太了解javascript，我的技能主要是复制/粘贴样式。