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

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

您可以添加包装的div和使其宽度100％和文本对齐中心像下面

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) 
 
      { 
 
       \t \t 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()

Answer 2

你使用CSS来帮助我暗示，我需要做的修改将图像加载到中心使页面元素成为一个容器？你应该能够使用align =“img-center”的命令，类似于align =“text-center”，我可能不正确，但这是我最好的想法。