CSS-如何将行内阻止项列表居中，同时将列表内容与左侧对齐？

Question

我在父元素内有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>
  </div>
</body>

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

这是我要存档的内容：

Answer 1

诸如此类的只是给text-align：left;项目并删除text-align：center;从列表

<body>
  <style>
  .container {
    width: 600px;
    height: 600px;
    text-align: center;
    border: 1px solid red;
    overflow-y: auto;
  }
  .item {
     display: inline-block;
     width: 200px;
     height: 200px;
     margin: 10px;
     background: gray;
	 text-align: left;
  }
  </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>

Answer 2

您实际上想实现什么？

现在.container和.list的宽度均为600px，因此您看不到列表元素是左对齐还是居中对齐。

首先，.list和.container的宽度应不同。然后您的列表应该是一个inline-block元素，它才能对text-align: center做出反应。

我为您制作了一个Codepen，以使其更清楚：https://codepen.io/leo-melin/pen/MWYbLLa

.container {
    width: 800px;
    height: 600px;
    text-align: center;
    border: 1px solid red;
    overflow-y: auto;
  }
  .list {
    display: inline-block;
    width: 500px;
    border: solid 1px #000; /* Added border to make it visual */
    text-align: left;
  }
  .item {
     display: inline-block;
     width: 200px;
     height: 200px;
     margin: 10px;
     background: gray;
  }

Answer 3

将文本对齐：将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>

CSS-如何将行内阻止项列表居中，同时将列表内容与左侧对齐？

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

3个回答

最新问题

CSS-如何将行内阻止项列表居中，同时将列表内容与左侧对齐？

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

3个回答

最新问题

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