CSS-如何将一个内联阻止项目列表居中，同时将每个项目向左对齐

问题描述 投票：0回答：1

我在父元素内有inline-block个元素的列表。我不会将父元素居中，同时将子元素保持在左侧。

<body>
  <style>
  .container {
    width: 600px;
    height: 600px;
    text-align: center;
    border: 1px solid red;
    overflow-y: auto;
  }
  .list {
    text-align: left;
  }
  .item {
     display: inline-block;
     width: 200px;
     height: 200px;
     margin: 10px;
     background: gray;
  }
  </style>
  <div class="container">
    <div class="list">          
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>        
    </div>
  </div>
</body>

如在所附示例中看到的，list元素未居中。如果删除align: left样式，则list元素将居中，但item元素也将居中（我希望它们向左对齐）

css center text-align
1个回答
0
投票

将文本对齐：使CSS属性居中于项目类。

<body>
  <style>
  .container {
    width: 600px;
    height: 600px;
    text-align: center;
    border: 1px solid red;
    overflow-y: auto;
  }
  .list {
    text-align: center;
  }
  .item {
     display: inline-block;
     text-align: left;
     width: 200px;
     height: 200px;
     margin: 10px;
     background: gray;
  }
  </style>
  <div class="container">
    <div class="list">          
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
      <div class="item">6</div>
      <div class="item">7</div>
      <div class="item">8</div>
      <div class="item">9</div>        
    </div>
  </div>
</body>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.