HTML / CSS水平对齐div中元素的最佳方法

Question

我正在研究以下事项：

右侧部分（黄色bg）中的内容需要＆＃34;堆叠＆＃34;在右侧区域内水平对齐。

解决此问题的最佳/最简单方法是什么？

1. 我可以使用高度百分比的div吗？
2. 我应该使用边距和负边距吗？
3. 我应该为右边的每个内容创建单独的div吗？

任何帮助，示例或资源，非常感谢

Answer 1

使用.outer { display: flex; flex-wrap: wrap; } .inner { padding: 20px 0; background: red; margin: 5px; } .inner.nr1, .inner.nr2 { width: 80%; } .inner.nr3, .inner.nr4, .inner.nr5 { width: 25%; }

<div class="outer">
  <div class="inner nr1">
  </div>
  <div class="inner nr2">
  </div>
  <div class="inner nr3">
  </div>
  <div class="inner nr4">
  </div>
  <div class="inner nr5">
  </div>
</div>

"SELECT * FROM products WHERE LOWER(name) IN (@name1, @name2, @name3);"