在不触摸HTML的情况下，如何定位所有文本，使其位于图像的中间？
我试过使用justify-content，align-content等，但是它不起作用。
h1 { grid-area: h1; }
h2 { grid-area: h2; }
p { grid-area: p; }
img { grid-area: img; }
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"h1 img"
"h2 img"
"p img"
". img";
text-align: center;
}<div class="grid">
<h1>Header</h1>
<h2>Subheader</h2>
<img src="https://images.unsplash.com/photo-1594041221013-7f4944a487cf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="">
<p>some paragraph text...</p>
</div>改变你grid-template-areas的
". img"
"h1 img"
"h2 img"
"p img"
". img";
并添加 align-content:center
h1 {
grid-area: h1;
}
h2 {
grid-area: h2;
}
p {
grid-area: p;
}
img {
grid-area: img;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas: ". img" "h1 img" "h2 img" "p img" ". img";
text-align: center;
align-content: center;
}
.grid>* {
padding: 0;
margin: 0;
border: solid red;
}<div class="grid">
<h1>Header</h1>
<h2>Subheader</h2>
<img src="https://images.unsplash.com/photo-1594041221013-7f4944a487cf?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="" />
<p>some paragraph text...</p>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句