html框的垂直对齐方式

Question

我通过php循环显示美国州名，基本上是我的帖子。这些是完全响应的，但客户希望状态名称垂直对齐 以下是这些显示的方式

我的客户希望以这种方式

我该怎么做？

Answer 1

我建议使用 flexbox 。您要做的是为容器和商品设置height，然后使用 flex-direction: column 进行垂直排序。 flex-wrap: wrap 可确保一旦有多个商品超出容器可以处理的数量，商品就会溢出到下一列。

除此之外，您还可以结合使用 align-items: center 和 justify-content: center 来确保所有项目都水平和垂直居中

＆＃13;

＆＃13;

.container {
  border: 1px solid black;
  padding: 20px;
  height: 100px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.item {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

＆＃13;

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
</div>

＆＃13;

＆＃13;

＆＃13;

这样，您只需以简单的循环输出状态，例如：

echo "<div class='item'>" . $state . "</div>";

不用担心任何幻想＆＃39; PHP工作。

希望这有帮助！ ：）

Answer 2

尝试无序列表的列属性。

ul {
  columns: 2;
  -webkit-columns: 2;
  -moz-columns: 2;
  list-style: none
}

<ul>
  <li>Alabama</li>
  <li>Alaska</li>
  <li>Arizona</li>
  <li>New York</li>
  <li>Texas</li>
  <li>Virginia</li>
</ul>