Html 使用引导和CSS将项目居中
我的页面有一个非常新的问题：我不能在页眉中居中放置我的div图像，也不能垂直居中放置内容。这就是它看起来的样子： 如您所见，我希望它的位置是Html 使用引导和CSS将项目居中,html,css,bootstrap-4,Html,Css,Bootstrap 4,我的页面有一个非常新的问题：我不能在页眉中居中放置我的div图像，也不能垂直居中放置内容。这就是它看起来的样子： 如您所见，我希望它的位置是POS。我尝试了margin:auto，使用flex，但似乎无法修复它！我也试过使用bootstrap，但我很困惑 这就是“代码”： 我知道这对你来说应该很容易，但不要走到前台。我试图进行调查，但它在网上截取的代码中的作用在我的代码中似乎不起作用。您知道如何将徽标居中以及如何垂直对齐产品div（包含图像和标题的div）吗？我在您的CSS中更改了一些内容，这
POSmargin:auto我知道这对你来说应该很容易，但不要走到前台。我试图进行调查，但它在网上截取的代码中的作用在我的代码中似乎不起作用。您知道如何将徽标居中以及如何垂直对齐产品div（包含图像和标题的div）吗？我在您的CSS中更改了一些内容，这对我很有用 我删除了
标题中的弹性元素徽标标题a显示：块和页边距：自动。还删除了徽标标题的绝对位置
正文{
字体系列：“Lato”，无衬线；
}
.集装箱img{
边框：1.5px实心rgb（138137137）；
宽度：400px；
}
标题{
位置：相对位置；
显示：块；
宽度：100%；
高度：10公分；
}
标题。标志持有人{
显示：块；
保证金：自动；
背景：url（'../img/main logo.png'）无重复中心；
宽度：104px；高度：85px；
}
.集装箱h1{
文本对齐：居中；
文本转换：大写；
颜色：#353738；
字母间距：3px；
字体大小：30px；
字号：600；
}
谢谢！你知道如何垂直对齐产品容器吗？@MartínSchere：你可以将.container做成一个柔性容器，高度为100%。但我不知道你的整个页面。它可能需要一些调整.container{display:flex；align items:center；justify content:center；height:100%；}
<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>
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;
}