我必须将此 div 水平放置到中心。我怎样才能做到这一点？答案

【问题标题】：I have to put horizontally this div to the center. How can I do that?我必须将此 div 水平放置到中心。我怎样才能做到这一点？
【发布时间】：2019-08-24 22:01:13
【问题描述】：

<div class="row text-center table-bordered">
  @foreach (var moto in Model) {
  <div class="" style="background-color:white; border:solid; border-color:black; border-width:2px; margin-bottom:20px;">
    <a href='@Url.Action("Details", new {bikeID=moto.Moto_Model,Brand=moto.Moto_Brand})'>
      <h6 style="text-align:center; color:black; text-decoration:none;">@moto.Moto_Brand @moto.Moto_Model</h6>
      <div class="col-12">
        <img class="img-fluid" src="@moto.Moto_img" style="height:125px;width:200px;border-width:1px; ">
      </div>
    </a>
  </div>
  }
</div>

我试过 justify-center 内容中心 text-center 但它是这样的：

|O O O |

我想要这样：

| O O O |

但我想不通...我从 EF 获取数据，但是当我最后使用 justify center 2 自行车模型时，我想把它们像三重和三重一样，就像 |..o ..o..|我希望它是|.O.O...|明白了吗？

【问题讨论】：

标签： html css twitter-bootstrap model-view-controller

【解决方案1】：

这个？

<h6 style="text-align:center; color:black; text-decoration:none;"><div class="mx-auto">@moto.Moto_Brand</div><div class="mx-auto">@moto.Moto_Model</div></h6>

【讨论】：

【解决方案2】：

试试这个：

.text-center{
  width: 100%; 
}
.text-center>div{
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  justify-items: center;
}

【讨论】：

查看我的修改

【解决方案3】：

我不确定你的 Bootstrap 版本，但如果我阅读 <div class="col-12"> 我猜是 Bootstrap 4。

基于此：

您可以使用 style="background-color:white; border:solid; border-color:black; border-width:2px; margin-bottom:20px;" 将类 col-4 添加到 div（您的自行车元素）。

默认网格为 12 列，因此 12 除以 3 个元素为 4。

Bootstrap 4 也有一个相当不错的grid docs，你可能想读一读。

如果您想让自行车元素居中： 您还必须使用row 类将justify-content-center 添加到div 中，以使最后两个元素居中，就像您描述的那样。（我在下面的示例代码 sn-p 中这样做了）

注意： 我添加到此代码示例中的当前列类 (col-4) 不适合移动设备，也就是根据您的屏幕大小调整大小。你想考虑像col-12 col-lg-3 col-md-4 col-sm-5 这样的事情，这样你的自行车元素就会随着屏幕调整大小。

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="row text-center table-bordered justify-content-center">
  <div class="col-4" style="background-color:white; border:solid; border-color:black; border-width:2px; margin-bottom:20px;">
    <a href='@Url.Action("Details", new {bikeID=moto.Moto_Model,Brand=moto.Moto_Brand})'>
      <h6 style="text-align:center; color:black; text-decoration:none;">@moto.Moto_Brand @moto.Moto_Model</h6>
      <div class="col-12">
        <img class="img-fluid" src="@moto.Moto_img" style="height:125px;width:200px;border-width:1px; ">
      </div>
    </a>
  </div>

  <div class="col-4" style="background-color:white; border:solid; border-color:black; border-width:2px; margin-bottom:20px;">
    <a href='@Url.Action("Details", new {bikeID=moto.Moto_Model,Brand=moto.Moto_Brand})'>
      <h6 style="text-align:center; color:black; text-decoration:none;">@moto.Moto_Brand @moto.Moto_Model</h6>
      <div class="col-12">
        <img class="img-fluid" src="@moto.Moto_img" style="height:125px;width:200px;border-width:1px; ">
      </div>
    </a>
  </div>

  <div class="col-4" style="background-color:white; border:solid; border-color:black; border-width:2px; margin-bottom:20px;">
    <a href='@Url.Action("Details", new {bikeID=moto.Moto_Model,Brand=moto.Moto_Brand})'>
      <h6 style="text-align:center; color:black; text-decoration:none;">@moto.Moto_Brand @moto.Moto_Model</h6>
      <div class="col-12">
        <img class="img-fluid" src="@moto.Moto_img" style="height:125px;width:200px;border-width:1px; ">
      </div>
    </a>
  </div>
    <div class="col-4" style="background-color:white; border:solid; border-color:black; border-width:2px; margin-bottom:20px;">
    <a href='@Url.Action("Details", new {bikeID=moto.Moto_Model,Brand=moto.Moto_Brand})'>
      <h6 style="text-align:center; color:black; text-decoration:none;">@moto.Moto_Brand @moto.Moto_Model</h6>
      <div class="col-12">
        <img class="img-fluid" src="@moto.Moto_img" style="height:125px;width:200px;border-width:1px; ">
      </div>
    </a>
  </div>
    <div class="col-4" style="background-color:white; border:solid; border-color:black; border-width:2px; margin-bottom:20px;">
    <a href='@Url.Action("Details", new {bikeID=moto.Moto_Model,Brand=moto.Moto_Brand})'>
      <h6 style="text-align:center; color:black; text-decoration:none;">@moto.Moto_Brand @moto.Moto_Model</h6>
      <div class="col-12">
        <img class="img-fluid" src="@moto.Moto_img" style="height:125px;width:200px;border-width:1px; ">
      </div>
    </a>
  </div>
</div>

【讨论】：