Question

我试图使用引导程序使三个div居中对齐。我有一个带有类容器的div，它具有三个div。我试图在浏览器中居中对齐这三个div。我可以将它们放到中心，但它们会居左。下面是代码

CREATE TABLE [dbo].[Employee_Audit]
(
    [EmployeeCode] [int] NOT NULL,
    [FirstName] [varchar](50) NULL,
    [LastName] [varchar](50) NULL,
    [Email] [varchar](50) NULL,
    [PositionOld] [varchar](30) NULL,
    [PositionNew] [varchar](30) NULL,
    [Date] [datetime] NULL
 )

Answer 1

将代码更改为

<div class="container d-flex align-items-center h-100">
  <div class="row">
    <div class="col col-4">
      1 of 2
    </div>
    <div class="col col-4">
      2 of 2
    </div>
    <div class="col col-4">
      Extra
    </div>
</div>

Answer 2

好的，所以我弄清楚了问题所在。这是下面的代码。容器和行div都应设置为h-100，并将.d-flex类应用于行div。

<div class="container h-100">
        <div class="row align-items-center d-flex h-100">
            <div class="col col-lg-3">
              1 of 2
            </div>
            <div class="col col-lg-6">
              2 of 2
            </div>
            <div class="col col-lg-3">
              Extra
            </div>
        </div>
    </div>

Answer 3

<div class="container h-100">
    <div class="row align-items-center text-center">
        <div class="col col-4 mx-auto">
            1 of 2
        </div>
        <div class="col col-4 mx-auto">
            2 of 2
        </div>
        <div class="col col-4 mx-auto">
            Extra
        </div>
    </div>
</div>

我在您的div上使用了mx-auto类，还添加了text-center类来使文本居中。

查看笔-https://codepen.io/buzztnt/pen/MWKVZpB

Answer 4

您可以编写这样的代码

<div class="container">
  <div class="row text-center">
    <div class="col-sm-4">1 of 2</div>
    <div class="col-sm-4">2 of 2</div>
    <div class="col-sm-4">Extra</div>
  </div>
</div>

需要使用引导程序使div居中对齐

4 个答案: