时间戳

首页 > 解决方案 > 如何在此 CSS 网格中将内容放置在标题的左侧和右侧？

css - 如何在此 CSS 网格中将内容放置在标题的左侧和右侧？

问题描述

在附加的代码段中，网格的“标题”部分具有左对齐的文本。如何添加与网格最右侧部分对齐的附加文本？另外，我想知道如何将文本垂直居中，因为它目前位于中间上方。我尝试添加另一个 div 并使用 justify-content 和 align-items，但到目前为止我没有尝试过任何工作。将不胜感激任何帮助。谢谢你。

body {
  display: grid;
  grid-template-areas: "header header header" "nav article ads" "nav footer footer";
  grid-template-rows: 80px 1fr 70px;
  grid-template-columns: 20% 1fr 15%;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  height: 100vh;
  margin: 0;
}

header,
footer,
article,
nav,
div {
  padding: 1.2em;
  background: gold;
}

#pageHeader {
  grid-area: header;
}

#pageFooter {
  grid-area: footer;
}

#mainArticle {
  grid-area: article;
}

#mainNav {
  grid-area: nav;
}

#siteAds {
  grid-area: ads;
}


/* Stack the layout on small devices/viewports. */

@media all and (max-width: 575px) {
  body {
    grid-template-areas: "header" "article" "ads" "nav" "footer";
    grid-template-rows: 80px 1fr 70px 1fr 70px;
    grid-template-columns: 1fr;
  }
}
<header id="pageHeader">Header</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">Nav</nav>
<div id="siteAds">Ads</div>
<footer id="pageFooter">Footer</footer>

标签： cssgrid

解决方案

您可以在标题中创建左右元素，然后为标题提供以下样式： <div>

#pageHeader {
  display: flex;
  align-items: center;             /*center children*/
  justify-content: space-between;  /*separate children*/ 
}

请参阅下面的示例片段：

body {
  display: grid;
  grid-template-areas: "header header header" "nav article ads" "nav footer footer";
  grid-template-rows: 80px 1fr 70px;
  grid-template-columns: 20% 1fr 15%;
  grid-row-gap: 10px;
  grid-column-gap: 10px;
  height: 100vh;
  margin: 0;
}

header,
footer,
article,
nav,
div {
  padding: 1.2em;
  background: gold;
}

#pageHeader {
  grid-area: header;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#pageFooter {
  grid-area: footer;
}

#mainArticle {
  grid-area: article;
}

#mainNav {
  grid-area: nav;
}

#siteAds {
  grid-area: ads;
}


/* Stack the layout on small devices/viewports. */

@media all and (max-width: 575px) {
  body {
    grid-template-areas: "header" "article" "ads" "nav" "footer";
    grid-template-rows: 80px 1fr 70px 1fr 70px;
    grid-template-columns: 1fr;
  }
}
<!doctype html>
<title>CSS Grid Template 1</title>
<link rel="stylesheet" href="style.css">

<body>
  <header id="pageHeader">
    <div class="left">Header left</div>
    <div class="right">Header right</div>
  </header>
  <article id="mainArticle">Article</article>
  <nav id="mainNav">Nav</nav>
  <div id="siteAds">Ads</div>
  <footer id="pageFooter">Footer</footer>
</body>

推荐阅读