如何为中心容器中的最后一个元素设置左对齐？答案

【问题标题】：How can I set a left align for the last element which is into a center container?如何为中心容器中的最后一个元素设置左对齐？
【发布时间】：2017-07-11 17:02:12
【问题描述】：

这是我的代码：

.container{
  width: 50%;
  border: 1px solid;
  text-align: center;
}

.box{
  display: inline-block;
  border: 1px solid red;
  width: 100px;
  height: 20px;
  margin: 10px;
}

<div class="container">
  <div class="box">sth</div>
  <div class="box">sth</div>
  <div class="box">sth</div>
  <div class="box">sth</div>
  <div class="box">sth</div>
</div>

如您所见，最后一个元素也是中心。虽然我需要保持在同一行 (vertically) 在左列。所以这是预期的结果：

我该怎么做？

【问题讨论】：

相关 - stackoverflow.com/questions/32802202/…
和 - stackoverflow.com/questions/33192745/…
你愿意改变你的标记吗？
@Mr.Alien 我可以改变一切...... HTML 和 CSS 代码。我只需要将盒子保留在容器中心，并将最后一个盒子设置在左列的同一行（垂直）。
@MartinAJ 说我正在调整屏幕大小，第二行有两个框，第一行有三个，你想让底部的两个框居中吗？

标签： javascript jquery html css

【解决方案1】：

在你的区块上使用float:left。

您需要添加嵌套的 div 并在其上设置宽度。

然后您的box 元素将全部居中到嵌套的 div，并且您的最后一个框位于左列中。

.center {
    text-align: center;
    margin-left:auto%;
    margin-right:auto%;
    width: 100%;  
}
.container{
    margin-left:25%;
    margin-right:25%; 
    width:40%;
    border: 1px solid;  

}

.box{
  display: inline-block;
  border: 1px solid red;
  float: left;
  width: 100px;
  height: 20px;
  margin: 10px;

}

<div class="center">
<div class="container">
  <div class="box">sth</div>
  <div class="box">sth</div>
  <div class="box">sth</div>
  <div class="box">sth</div>
  <div class="box">sth</div>
</div>
</div>

【讨论】：

我不想要一个固定宽度 (px) 作为容器的宽度。
我把它改成了 pct。但是这个 pct 需要根据你的内盒的相对宽度来设置。
如果你看一下引导带，这就是为什么他们有 col-md-2 到 col-md-12。
包含框现在需要overflow:auto 才能自动垂直拉伸。

【解决方案2】：

尝试使用浮动属性。并以最小高度修复容器

.container{
  width: 50%;
  border: 1px solid;
  text-align: center;
  min-height:150px;
}

.box{
  float:left;
  border: 1px solid red;
  width: 100px;
  height: 20px;
  margin: 10px;
}

<div class="container">
  <div class="box">sth</div>
  <div class="box">sth</div>
  <div class="box">sth</div>
  <div class="box">sth</div>
  <div class="box">sth</div>
</div>

【讨论】：

看来我的问题还不够清楚。因为在您的代码中，所有框都在容器的左侧。而我需要留在集装箱中心。

【解决方案3】：

我添加了一些背景颜色，让您看看容器在做什么。

.container{
  width: 50%;
  border: 1px solid;
  text-align: center;
  background-color: silver;
  
}

.box{
  display: inline-block;
  border: 1px solid red;
  width: 100px;
  height: 20px;
  margin: 10px;
  text-align: center;
}

.innerContainer {
  width: 250px;
  background-color: lightgray;
  margin: auto;
}

.row {
  text-align: left;
}

<div class="container" align="center">
  <div class="innerContainer">
    <div class="box">sth</div>
    <div class="box">sth</div>
    <div class="box">sth</div>
    <div class="box">sth</div>
    <div class="row">
      <div class="box">sth</div>
    </div>
  </div>
</div>

【讨论】：

中心是无效的 html5
我不想要一个固定宽度 (px) 作为容器的宽度。
如果没有设定的像素数，我无法做到这一点。对不起。我试过:(

【解决方案4】：

在 box 类中使用 float:left;，例如：

.box{
   display: inline-block;
   border: 1px solid red;
   width: 100px;
   height: 20px;
   margin: 10px;
   float: left;
}

【讨论】：

【解决方案5】：

试试这个，如果你想让它响应，我认为它会很好，我会帮你mediaQuery。

.container {
  width: 50%;
  border: 1px solid;
  text-align: center;
  display: flex;
  flex-direction: colomn;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  align-content: stretch;
}

.box {
  display: inline-block;
  border: 1px solid red;
  width: 100px;
  height: 20px;
  margin: 10px;
}

<div class="container">
  <div class="box">sth</div>
  <div class="box">sth</div>
  <div class="box">sth</div>
  <div class="box">sth</div>
  <div class="box">sth</div>
</div>

【讨论】：

你知道，我想要一个固定宽度的盒子。
@MartinAJ 你也想让它负责吗？
是的，这实际上是问题:-)
@MartinAJ 我已经更改了我的代码，您可以检查一下吗
现在盒子不在中心了。