当行被破坏时,CSS将DIV居中

Question

我想在线路断开时设置.container的内容.我不知道如何同时使用float:left和center.我认为这两种都是独特的.

div.container {
  border: solid 1px black;
  text-align: center;
}

div.floatfix:after {
  content: '';
  display: block;
  clear: both;
}

div.item {
  float: left;
  border: solid 1px red;
  padding: 5px;
}

<div class="container floatfix">
  <div class="item">First Item</div>
  <div class="item">Another Item</div>
  <div class="item">Just Another Item</div>
  <div class="item">Middle Item</div>
  <div class="item">Item</div>
  <div class="item">Last Item</div>
  <div class="item">Realy Last Item</div>
</div>

我希望得到如下效果

Answer 1

你应该使用display: inline-block;而不是float: left;你的物品.

然后,您可以使用以下内容修改容器的样式:

• margin: auto:将它放在页面中
• text-align: auto:以其内容为中心
• width: ...px:限制宽度

这给你:

div.container {
  border: solid 1px black;
  text-align: center;
  width: 200px;
  margin: auto;
  text-align: center;
}

div.floatfix:after {
  content: '';
  display: block;
  clear: both;
}

div.item {
  display: inline-block;
  border: solid 1px red;
  padding: 5px;
}

<div class="container floatfix">
  <div class="item">First Item</div>
  <div class="item">Another Item</div>
  <div class="item">Just Another Item</div>
  <div class="item">Middle Item</div>
  <div class="item">Item</div>
  <div class="item">Last Item</div>
  <div class="item">Realy Last Item</div>
</div>