如何在 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