This is the main.js of the electron app
const {BrowserWindow , app} = require('electron');
const path = require('path');
const createWindow = () => {
const win = new BrowserWindow({
width:1000,
height: 800,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
win.loadFile("index.html")
}
app.whenReady().then(() => {
createWindow()
})
app.on('window-all-closed', () => {
if (process.platform !== 'drawin') app.quit()
})
This is the index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Africa Investment</title>
</head>
<body>
<div class="logoCont">
<img class="logo" src="logo.png" />
</div>
<div class="sponsorOneCont">
<img class="sponsorOne" src="SponsorOne.png" />
</div>
<script src="index.js"> </script>
</body>
</html>
This is the index.css
* {
padding: 0;
margin: 0;
}
.logoCont {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 545px;
background-color: black;
position: fixed
}
.logo {
width: 680px;
height: 400px
}
.sponsorOneCont {
display: none;
justify-content: center;
align-items: center;
width: 100%;
height: 545px;
background-color: White;
}
I am trying to center the logo in the window but it does not center align vertically but only horizontally. Any way to fix this ? And if i resize the window in electron image does not increase in size. Any help would be highly appreciated. Thank you.