[英]how to align an image to the center using javascript
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. 我有浏览和上传图像的代码,但我需要将图像与center.in对齐。在此代码中,图像是使用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 ";
}
}
}
` `
So, please help me by suggesting the changes that i need to do to load the image to the center only using javascript 因此,请通过建议仅使用javascript将图像加载到中心所需的更改来帮助我
Did you use css to make the page elements into a container? 您是否使用CSS将页面元素放入容器中? 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.
您应该能够像使用align =“ text-center”一样使用align =“ img-center”的命令,我可能不正确,但这是对此的最佳考虑。
You can add wrapper div and make its width 100% and text-align center like below 您可以添加包装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) { 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()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.