У меня очень новая ie проблема с моей страницей: я не могу центрировать свое div-изображение в заголовке и не могу расположить содержимое по вертикали. Вот как это выглядит:
Как видите, позиция, которую я хочу, это POS. Я попытался margin:auto, используя flex, и я не могу исправить это! Я тоже пробовал с bootstrap, но я очень запутался.
Это "код":
<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;
}
Я знаю, это должно быть легко для вас, но не вешать. Я пытался исследовать, но то, что работает в коде, отсканированном онлайн, похоже, не работает в моем коде. Есть ли у вас какие-либо идеи о том, как центрировать lo go и как выровнять по вертикали продукт div (div, содержащий изображение и заголовок)?