編輯：錯誤的行為是由于漏掉了一個</div>（見截圖）。
非常感謝你的耐心 -_-
我正在為Tailwind CSS中的水平專案居中而苦惱。 讓我們來看看一個有兩個孩子的div，像這樣：
< div class="flex-row w-60 justify-center items-center space-x-10 border-2"/span>>
<p>text 1</p>
<p>text 2</p>
</div>/span>
而且奇怪的是，它沒有居中！
我發現問題出在這里。
我發現，問題在于x-spacing是在兩個物件之間添加的，但卻吞噬了第一個物件之前的空間，因此，隨著space-x的增加，最左邊的物件被 "推 "到了左邊。
這就是居中：
< div class="flex-row w-60 justify-center items-center space-x-0 border-2"/span>>
<p>/span>text 1</p>
<p>text 2</p>
</div>/span>
結果。
這不是：
< div class="flex-row w-60 justify-center items-center space-x-16 border-2"/span>>
<p>text 1</p>
<p>text 2</p>
</div>/span>
結果。
有誰知道這個問題的解決辦法嗎？這是一個錯誤，還是我只是期望從justify-items中獲得錯誤的行為？
uj5u.com熱心網友回復：
你是否期望這樣？
<link href="https://cdnjs. cloudflare.com/ajax/libs/tailwindcss/2.2.15/tailwind.min.css" rel=" stylesheet"/>
<div class="flex justify-between">
<div class="flex px-2"/span>> text 1</div>。
<div class="flex px-2"/span>> text 2</div>。
<div class="flex px-2"/span>> text 3</div>。
</div>/span>如果沒有，請更詳細地描述你期望的結果！
如果沒有，請更詳細地描述你期望的結果！
uj5u.com熱心網友回復：
問題在于使用w-60，它將<div>設定為15rem寬。這導致你的兩個<p>標簽在允許的15rem范圍內居中，但由于<div>是左對齊的，專案沒有正確居中。
您可以洗掉該類，以使兩個<p>標簽按要求居中。另外，你可以添加另一個帶有<div>類的w-60標簽來獲得你想要的居中效果。
<link href="https://cdnjs. cloudflare.com/ajax/libs/tailwindcss/2.2.15/tailwind.min.css" rel=" stylesheet"/>
<div class="w-60 bg-red-50"/span>> 這個div的寬度為15rem</div>。
<hr class="my-5">
<!-- 15rem container div-->
<div class="flex w-60 bg-red-50 justify-center items-center space-x-16 border-2" >
<p>/span>text 1</p>
<p>text 2</p>
</div>/span>
<hr class="my-5">
<!--應用w-60類的附加div包裝器。-->
<div class="w-60 mx-auto"/span>>
<div class="flex bg-red-50 justify-center items-center space-x-16 border-2" >
<p>text 1</p>
<p>text 2</p>
</div>/span>
</div>/span>
<hr class="my-5">
<!--100% wide container div-->
<div class="flex bg-red-50 justify-center items-center space-x-16 border-2" >
<p>text 1</p>
<p>text 2</p>
</div>/span>flex-row類是多余的，因為它是默認行為，所以我從代碼中洗掉了它。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/333974.html
標籤：