I'm currently facing an issue where I need to align an image at the center of a div without using absolute positioning. This is necessary because the image spills over into any adjacent divs on the page. Specifically, I have a previous div containing buttons, but the image keeps overlapping it. Is there a method to center the image without resorting to absolute positioning?
Additional context - I am working with Electron. The image in question is actually a base64 encoded image retrieved from a canvas using canvas.toDataURL(), then transferred to the main process via IPC. Subsequently, the window navigates to another HTML file and once the new page loads completely, an IPC request is made to fetch the image again. Finally, the image is embedded into an img tag on the page.
$(document).ready(function() {
ipcRenderer.send('display-snap');
ipcRenderer.on('reply-snap', (event, arg) => {
$("#snapshot").attr("src", arg);
//$("#snapshot").css('background-image', 'url(' + arg + ') no-repeat center center');
});
});
Although setting the src attribute works as intended, the commented out code does not function as expected. I attempted to utilize a div element instead of an img tag, but the background image property of the div remains unset.
I've created a JSFiddle showcasing the desired outcome. The objective is to centrally position the image within the content div exclusively, ensuring it doesn't overlap the menu div. Both horizontal and vertical centering should be achieved for the image.