Question

在不触摸HTML的情况下，如何定位所有文本，使其位于图像的中间？

我尝试使用辩解内容，对齐内容等，但是它不起作用。

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>

Answer 1

要垂直对齐，应使用

align-items: center

在这里您可以找到网格对齐的详细说明。 Centering in CSS Grid

Answer 2

使用{p>更改您的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>

如何在网格中垂直居中放置所有文本？

2 个答案: