Question

我在与文本行垂直对齐时遇到问题。我有两个文本行return { subtitle: author && `by ${author}` }，我想将第二个文本行放在我的<p>的底部，因此我尝试做<div>和vertical-align: bottom以及{{我的text-bottom中的1}}和top中的那一个无效。

bottom

<p>

Answer 1

我建议以下内容，其中涉及HTML的一些小更新；解释在代码本身的注释中：

.header {
  grid-area: header;
  background-color: red;
  display: grid;
  grid-template-areas: 'headerLeft rest headerRight';
  grid-template-columns: 10% 1fr 30%;
  padding: 5px;
}

.header p {
  margin: 0px;
}

.headerRight {
  grid-area: headerRight;
  
  /* here we specify the use of CSS Grid layout: */
  display: grid;
  /* define the top-and-bottom (0) and left-and-right (5px) grid
     gap gutters: */
  grid-gap: 0 5px;
  /* define the named areas of the grid: */
  grid-template-areas:
      ". paragraphAreaOne imageOne imageTwo"
      ". . imageOne imageTwo"
      ". paragraphAreaTwo imageOne imageTwo";
  
  /* define the sizing of the columns; here we have the first column
     taking up one fractional unit (1fr), with the other columns sized,
     using the repeat() function, at min-content in order to have those
     grid-columns sized to the minimum necessary to contain their content: */
  grid-template-columns: 1fr repeat(3, min-content);
  /* here we have three rows each sized, using the repeat() function,
     to size each row to min-content: */
  grid-template-rows: repeat(3, min-content);
}

/* positioning the various elements into the appropriate grid areas: */
.headerRight p:first-of-type {
  grid-area: paragraphAreaOne;
}

.headerRight p:nth-of-type(2) {
  grid-area: paragraphAreaTwo;
}

.headerRight img:first-of-type {
  grid-area: imageOne;
}

.headerRight img:nth-of-type(2) {
  grid-area: imageTwo;
}

<div class="layout">
  <div class="header">
    <div class="headerRight">
      <!-- your img elements were wrapped in <p> elements, which were removed,
           partially for semantic reasons, and partially because they were
           simply unnecessary -->
      <img src="https://i.imgur.com/V2aWxOK.png" style="height: 13vh" />
      <img src="https://i.imgur.com/V2aWxOK.png" style="height: 13vh" />
      <p>Ola</p>
      <!-- there was a <br> element here which, when using a Grid layout
           serves no purpose, so was removed -->
      <p>Ola</p>
    </div>
  </div>
</div>

JS Fiddle demo。

参考文献：

Answer 2

您正在使用网格，因此您可以使用align-items：end到标题，它将元素对齐到底部，在这里https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

如何垂直对齐文本行？

2 个答案: