how to align an image to the center using javascript

Question

I have the code to browse and upload an image but i need the image to be aligned to the center.in this code the image is browsed and loaded using javascript and is called by using a function so there is no html code related to the image in order to use img tags or 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 ";
         }
     }
 }

`

So, please help me by suggesting the changes that i need to do to load the image to the center only using javascript

Answer 1

Did you use css to make the page elements into a container? You should be able to use the command of align="img-center" as similar to align="text-center", I may be incorrect but that is my best thought on this.

Answer 2

You can add wrapper div and make its width 100% and text-align center like below

 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()