居中动态 div答案

【问题标题】：Center dynamic divs居中动态 div
【发布时间】：2021-09-13 13:05:05
【问题描述】：

也许我没睡够（？？？？？？），但我有这段代码为我的 mongo 集合中的每一行生成一个 div：

{formIncomes === false && (
       Object.entries(userWalletIncomes).map(([key, value]) => {
           return (
               <div className="flex justify-items-center" key={key}>
                      <p className="w-32 border p-1 capitalize">{key} :</p>
                      <p onClick={(e) => setformIncomes(true)} className="w-32 border p-1 text-green-500">{value}€</p>
                      <button onClick={(e) => handleDeleteIncome(key)}><i className="fas fa-times text-gray-400 hover:text-red-600 text-xs p-1"></i></button>
               </div>
                            )
                        })
                    )}

div 被挡在其父母的左侧：

我找不到将动态生成的 div 居中的方法。

PS：我使用的是tailwindCSS，但如果你找到经典的css，我会用tailwind语法来填补。

有什么想法吗？

【问题讨论】：

寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Reproducible Example
我不能，因为我没有 CSS。只有 TailwindCSS @Paulie_D
所以你确实有 CSS。您可以在片段中链接 Tailwind

标签： html css reactjs tailwind-css

【解决方案1】：

我会将所有内容包装到 div 中并将此 CSS 应用于 div

display:flex;
justify-content:center;

【讨论】：