如何在 CSS 网格中居中列表项（新方法）

Question

如何在列表 class 中将列表项居中（它被定义为网格）。 我尝试在每个 css class 上使用边距、对齐项目：中心和添加/删除边距，但无济于事。

Gridbyexample 是我一直在使用的教程网站，但在涉及到这种特殊情况时它并不是很有帮助。 关于如何使用 CSS 网格方法对 go 有任何想法？ 我试图只使用这种方法，因为它是一个正在实施的新标准。 最终，我正在尝试建立一个对 javascript 依赖最小的网站。

索引.HTML：

<html lang="en">
<div class="grid">
    <head class="main-head">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="styles.css">
        <title>Fast Websites</title>
    </head>

    <nav class="main-nav">
        <ul>
            <li><a href="">Nav 1</a></li>
            <li><a href="">Nav 2</a></li>
            <li><a href="">Nav 3</a></li>
        </ul>
    </nav>

    <body>
        <article class="post">
        <h1>Built solely on HTML and CSS</h1>  
        <p>Welcome to my blog. This is my attempt to create a blog type platform that relies </p>

        <h1>Second Paragraph</h1>  
        <p>Welcome to my blog. Lorem, ipsum dolor sit amet consectetur adipisicing elit.
        Necessitatibus autem obcaecati sit quasi 
        asperiores eaque laborum dolore, harum maxime dolores sint 
        architecto quis earum corrupti ipsam eveniet placeat facilis 
        natus.</p> 
        <p>Welcome to my blog. Lorem, ipsum dolor sit amet consectetur adipisicing elit.
        Necessitatibus autem obcaecati sit quasi 
        asperiores eaque laborum dolore, harum maxime dolores sint 
        architecto quis earum corrupti ipsam eveniet placeat facilis 
        natus.</p> 
        <p>Welcome to my blog. Lorem, ipsum dolor sit amet consectetur adipisicing elit.
        Necessitatibus autem obcaecati sit quasi 
        asperiores eaque laborum dolore, harum maxime dolores sint 
        architecto quis earum corrupti ipsam eveniet placeat facilis 
        natus.</p> 
        </article>

        <ul class="listing">
            <li>
              <h2>Item One</h2>
              <div class="body"><p>The content of this listing item goes here.</p></div>
              <div class="cta"><a href="">Call to action!</a></div>
            </li>
             <li>
               <h2>Item Two</h2>
               <div class="body"><p>The content of this listing item goes here.</p></div>
               <div class="cta"><a href="">Call to action!</a></div>
             </li>
             <li class="wide">
               <h2>Item Three</h2>
               <div class="body"><p>The content of this listing item goes here.</p> 
               <p>This one has more text than the other items.</p>
               <p>Quite a lot more</p>
               <p>Perhaps we could do something different with it?</p></div>
               <div class="cta"><a href="">Call to action!</a></div>
              </li>
              <li>
               <h2>Item Four</h2>
               <div class="body"><p>The content of this listing item goes here.</p></div>
               <div class="cta"><a href="">Call to action!</a></div>
              </li>
               <li>
               <h2>Item Five</h2>
               <div class="body"><p>The content of this listing item goes here.</p></div>
                <div class="cta"><a href="">Call to action!</a></div>
              </li>
          </ul>


    <div class="ad">Advertising</div>
    <footer class="main-footer">The footer</footer>
</div>
</body>
</html>

**STYLES.CSS**


*{box-sizing: border-box;}

.main-head {grid-area: header;}
.post {grid-area: post;}
.listing {grid-area: listing;}
.main-nav {grid-area: nav;}
.ad {grid-area: ad;}
.main-footer {grid-area: footer;}

.grid {
    display: grid;
    grid-gap: 2em;
    grid-template-areas: 
    "header"
    "nav"
    "post"
    "listing"
    "ad"
    "footer";
    grid-template-rows: 200px;
    grid-auto-rows: auto;
    background-color: lightseagreen;
}

.post {
    background-color: lightpink;
    text-align: center;
}

.listing {
    background-color: red;
    display: grid;
    list-style: none;
    margin: 2em;
    grid-gap: 20px;
    grid-template-columns: repeat(auto-fit,minmax(300px, 1fr));
  }

  .listing li {
    background-color: lightgrey;
    border: 1px solid #ffe066;
    border-radius: 5px;
    display: flex;
    flex-direction: column;

  }
  .listing .cta {
    margin-top: auto;
    border-top: 1px solid #ffe066;
    padding: 10px;
    text-align: center;
  }
  .listing .body {
    padding: 10px;
  }

code{background-color: lightgray;}

@media (min-width: 550px) {
    .grid {
      grid-template-columns: 1fr 3fr;
      grid-template-areas: 
        "header     header"
        "nav        nav"
        "post       post"
        "listing    listing"
        "ad         ad"
        "footer     footer";
    }
    nav ul {
      display: flex;
      justify-content: space-between;
    }
  }

  @media (min-width: 700px) {
    .grid {
      grid-template-columns: 1fr 4fr 1fr;
      grid-template-areas: 
        "header     header      header"
        "nav        nav         nav"
        "ad         ad          ad"
        "post       post        post"
        "listing    listing     listing"
        "footer     footer      footer";
     }
     nav ul {
       flex-direction: column;
     }
  }

Answer 1

您可以将列表放入<div></div>中，然后使用： align-items:center 。 这应该允许您按照您的要求进行操作。 希望这可以帮助？

如何在 CSS 网格中居中列表项（新方法）

问题描述

1 个解决方案

解决方案1
0 2020-04-07 03:30:18

如何在 CSS 网格中居中列表项（新方法）

问题描述

1 个解决方案

解决方案1 0 2020-04-07 03:30:18

解决方案1
0 2020-04-07 03:30:18