Css 将通过javascript附加的图像居中的最佳方法是什么？

所以我有3张图片，当点击一个按钮时会出现（每个都有自己的按钮）。 目前，这些图像从左到右堆叠在一起，并单独进行了一些css样式设计，但我希望以典型的照片库方式呈现这些图像。但是我不知道当所有与图像相关的东西（类、Id、src等）都是通过javascript创建的时候该怎么做

我试图创建一个典型的父和子div，就好像我正在使用javascript中创建的类名创建一个照片库一样，但我似乎无法实现这一点。当html中创建的类处于活动状态时，图像完全消失（我不是指css活动btw）

CSS

HTML

---

你能发布你当前得到的屏幕截图吗？我没有收到任何错误，因为只要html类处于活动状态，我的图像就会完全消失。我明白，你能发布页面的屏幕截图吗？它们消失可能是因为可见性设置为hiddenI，我只需要先查看它的外观，正如你所说的按钮，但我在你的

HTML

中没有看到任何按钮。你能发布你当前获得的屏幕截图吗？我没有收到任何错误，因为只要HTML类激活，我的图像就会完全消失。我明白，你能发布一个页面的截图吗？它们可能会消失，因为可见性设置为hiddenI。我只需要先看看它是什么样子，就像你说的按钮一样，但我在你的

HTML

中没有看到任何。

    .images{
        text-align:center;

        border:3px solid #666;
    }

    .characterImg, .featureImg, .traitImg{
        display:inline-block;

        border:1px solid #CCC;
    }

    <div class = "images" id = "images">
    <div class = "characterImg" id="characterImg"></div>
    <div class = "featureImg" id="featureImg"></div>
    <div class = "traitImg" id="traitImg"></div>
    </div>

    //before button clicked

    //this code is repeated three times for each image
    {
    let characterImage = document.createElement("IMG");
    document.querySelector("body").appendChild(characterImage);
    characterImage.id = "characterImg";
    characterImage.className = "characterImg";
    characterImage.src = "Placeholder";
    characterImage.style.visibility = "hidden";
    }
    //When button clicked
    function buttonAreaOne(){
    document.getElementById("characterImg").src="Game Photos/Henry";                         
    document.getElementById("characterImg").style.visibility = "visible";
    }




I just want these images centered with a border around them