Question

我有代码浏览和上传图片，但我需要将图像与中心对齐。在此代码中，图像使用javascript进行浏览和加载，并通过使用函数调用，因此没有相关的HTML代码到图像，以使用img标签或CSS。

`

function main()
 {
    var inputFileToLoad = document.createElement("input");
    inputFileToLoad.type = "file";
    inputFileToLoad.id = "inputFileToLoad";
    document.body.appendChild(inputFileToLoad);

    var buttonLoadFile = document.createElement("button");
    buttonLoadFile.onclick = loadImageFileAsURL;
    buttonLoadFile.id = "FileToLoad";
    buttonLoadFile.textContent = "Load Selected File";
    document.body.appendChild(buttonLoadFile);
 }

function loadImageFileAsURL()
 {
    var filesSelected = document.getElementById("inputFileToLoad").files;
    if (filesSelected.length > 0)
     {
        var fileToLoad = filesSelected[0];

        if (fileToLoad.type.match("image.*"))
         {
            var fileReader = new FileReader();
            fileReader.onload = function(fileLoadedEvent) 
             {
                var imageLoaded = document.createElement("img");
                imageLoaded.src = fileLoadedEvent.target.result;
                document.body.appendChild(imageLoaded);

             };
            fileReader.readAsDataURL(fileToLoad);
            document.getElementById("inputFileToLoad").style.visibility="hidden ";
            document.getElementById("FileToLoad").style.visibility="hidden ";
         }
     }
 }

`

所以，请通过建议我只需要使用javascript将图像加载到中心所需的更改来帮助我

Answer 1

您是否使用css将页面元素转换为容器？您应该能够使用align =“img-center”的命令与align =“text-center”类似，我可能不正确，但这是我最好的想法。

Answer 2

您可以添加包装div并使其宽度为100％，文本对齐中心如下

＆＃13;

function main()
 {
    var inputFileToLoad = document.createElement("input");
    inputFileToLoad.type = "file";
    inputFileToLoad.id = "inputFileToLoad";
    document.body.appendChild(inputFileToLoad);

    var buttonLoadFile = document.createElement("button");
    buttonLoadFile.onclick = loadImageFileAsURL;
    buttonLoadFile.id = "FileToLoad";
    buttonLoadFile.textContent = "Load Selected File";
    document.body.appendChild(buttonLoadFile);
 }

function loadImageFileAsURL()
 {
    var filesSelected = document.getElementById("inputFileToLoad").files;
    if (filesSelected.length > 0)
     {
        var fileToLoad = filesSelected[0];

        if (fileToLoad.type.match("image.*"))
         {
            var fileReader = new FileReader();
            fileReader.onload = function(fileLoadedEvent) 
             {
             		var div = document.createElement("div");
                div.style = "width:100%; text-align:center";
                var imageLoaded = document.createElement("img");
                imageLoaded.src = fileLoadedEvent.target.result;
                div.appendChild(imageLoaded);
                document.body.appendChild(div);

             };
            fileReader.readAsDataURL(fileToLoad);
            document.getElementById("inputFileToLoad").style.visibility="hidden ";
            document.getElementById("FileToLoad").style.visibility="hidden ";
         }
     }
 }
 
main()

＆＃13;

如何使用javascript将图像与中心对齐

2 个答案: