如何水平对齐元素？

Question

我有三个元素（DIV），需要水平对齐。我正在遵循Bootstrap的指南，但无法正常工作。

这就是我需要的样子：

这是现在的样子，它与左侧对齐：

这是我的代码：

.price-selection {
	border: 1px solid #8ABE57;
	display: inline-block;
 }

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

<div class="row m-0">
  <div class="col-12 product-info-subtitle cuanto-pagar">
    <p>¿Cuánto quieres pagar?</p>
  </div>
  <div class="col-12">
    <div class="row justify-content-center">
      <div class="col-3 price-selection text-center">
        <p class="price">one</p>
        <p class="period">one</p>
      </div>
      <div class="col-3 price-selection text-center">
        <p class="price">two</p>
        <p class="period">two</p>
      </div>
      <div class="col-3 price-selection text-center">
        <p class="price">three</p>
        <p class="period">three</p>
      </div>
    </div>
  </div>       
</div> 

Answer 1

使用m-0删除单杠。

  

列不应是其他列的直接子代。如果要划分列，请使用.row包装器。

解决方案1 ​​

我删除了justify-content-center，因为它无法分隔列之间的间隙，因此请使用justify-content-around。

.price-selection {
  border: 1px solid #8ABE57;
  display: inline-block;
}

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

<div class="row m-0 justify-content-around element">
  <div class="col-3 price-selection text-center">
    <p class="price">one</p>
    <p class="period">one</p>
  </div>
  <div class="col-3 price-selection text-center">
    <p class="price">two</p>
    <p class="period">two</p>
  </div>
  <div class="col-3 price-selection text-center">
    <p class="price">three</p>
    <p class="period">three</p>
  </div>     
</div>

解决方案2

您还可以使用CSS来使cols之间的间隔相等（space-evenly没有引导类）。

.element {     
    justify-content: space-evenly;
}

.price-selection {
	border: 1px solid #8ABE57;
	display: inline-block;
}
.element {     
    justify-content: space-evenly;
}

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

<div class="row m-0 element">
  <div class="col-3 price-selection text-center">
    <p class="price">one</p>
    <p class="period">one</p>
  </div>
  <div class="col-3 price-selection text-center">
    <p class="price">two</p>
    <p class="period">two</p>
  </div>
  <div class="col-3 price-selection text-center">
    <p class="price">three</p>
    <p class="period">three</p>
  </div>     
</div>

Answer 2

这是您要实现的目标的正确标记：

.price-selection {
  border: 1px solid #8ABE57;
  display: inline-block;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-12 product-info-subtitle cuanto-pagar">
      <p>¿Cuánto quieres pagar?</p>
    </div>
    <div class="col-12">
      <div class="row justify-content-around">
        <div class="col-3 price-selection text-center">
          <p class="price">one</p>
          <p class="period">one</p>
        </div>
        <div class="col-3 price-selection text-center">
          <p class="price">two</p>
          <p class="period">two</p>
        </div>
        <div class="col-3 price-selection text-center">
          <p class="price">three</p>
          <p class="period">three</p>
        </div>
      </div>
    </div>
  </div>
</div>

重要的部分是：我将col包裹在row类的justify-content-around中。

row部分将Bootstrap网格的边距/边距固定在各种屏幕尺寸上。

justify-content-around给它justify-content: space-evenly。目前，Bootstrap仅具有justify-content-around和justify-content-between。但是，自发布以来，flexbox为justify-content添加了一个新值（可能会添加到Bootstrap中），即space-evenly。但是，Bootstrap尚未提供此类。

如果要均匀分布元素，则需要自己在CSS中添加元素：

.price-selection {
  border: 1px solid #8ABE57;
  display: inline-block;
}
.justify-content-evenly {
  display: flex;
  justify-content: space-evenly;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-12 product-info-subtitle cuanto-pagar">
      <p>¿Cuánto quieres pagar?</p>
    </div>
    <div class="col-12">
      <div class="row justify-content-evenly">
        <div class="col-3 price-selection text-center">
          <p class="price">one</p>
          <p class="period">one</p>
        </div>
        <div class="col-3 price-selection text-center">
          <p class="price">two</p>
          <p class="period">two</p>
        </div>
        <div class="col-3 price-selection text-center">
          <p class="price">three</p>
          <p class="period">three</p>
        </div>
      </div>
    </div>
  </div>
</div>

为更好地了解flexbox中各种类型的间距之间的区别，以下是图形说明：https://css-tricks.com/almanac/properties/j/justify-content/#article-header-id-1