I am facing a simple issue with my webpage: I am unable to center the div-image in the header and align the content vertically. This is the current setup:
https://i.sstatic.net/uFViw.png
The desired position for the image is POS. I have tried methods like margin:auto, using flexbox, and even attempted to use bootstrap, but none of them seem to work! Here is the code snippet:
<body>
<header>
<div class="logo-holder"></div>
</header>
<div class="container align-middle">
<div class="row">
<div class="col">
<img src="{{ object.image.url }}">
</div>
<div class="col">
<div class="container">
<h1>{{ object.title }}</h1>
</div>
</div>
</div>
</div>
</body>
CSS:
body{
font-family: 'Lato', sans-serif;
}
.container img{
border: 1.5px solid rgb(138, 137, 137);
width: 400px;
}
header{
height: 10em;
display: flex;
align-items: center;
justify-content: center;
}
header .logo-holder{
margin:auto;
position: absolute;
background: url(../img/main-logo.png) no-repeat center center;
width: 104px; height: 85px;
position: absolute;
top: 30px;
left: 10%;
}
.container h1{
text-align: center;
text-transform: uppercase;
color: #353738;
letter-spacing: 3px;
font-size: 30px;
font-weight: 600;
}
This should be an easy fix for someone experienced in frontend development. I have researched extensively, but what works in online code snippets does not translate properly into my own code. Any suggestions on how to properly center the logo and vertically align the product div (the div containing the image and title)?