标题在多幅图像的部分上居中?

Question

我有一个节(StyledHead)，我从api映射出10个图像。我有另一个部分(StyledHeader)包装它，我也有一个h1。如何使h1居中使其位于图像的中心?

样式:

const StyledHeader = styled.header`
width: 60%;
max-width: 1200px;
margin: auto;
`;
const StyledHead = styled.section`
display: grid;
grid-template-columns: repeat(5, auto);
gap: 5px;
grid-template-rows: 1fr;
width: 100%;
opacity: 0.7;
img {
height: 100%;
width: 100%;
}
`;

代码:

<StyledHeader>
<h1>Sidetittel</h1>
{loading ? <p>laster...</p> : null}
<StyledHead>
{data.Search?.length > 0
? data.Search.slice(0, 10).map((items) => (
<img key={uuid()} alt="filmplakat" src={items.Poster} />
))
: null}
</StyledHead>
</StyledHeader>

Answer 1

您应该尝试将h1位置设置为绝对或固定，并尝试将其放置在父元素的中间。

如果你想把一些东西放在屏幕中间，你应该这样做:

h1 {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

但是如果你想让它位于父元素的中间你必须改变top和left属性，可能是margin或padding