如何水平对齐元素？

Paula 发表于 Dev

宝拉

我有三个元素（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>

Nisharg Shah

使用m-0用于删除单杠。

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

解决方案1

我删除了justify-content-center它，因为它无法在cols之间留出空隙，因此请使用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之间的均等间隔（没有的bootstrap类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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。