如何使用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」，我可能不正確，但這是我最好的想法。