时间戳

首页 > 解决方案 > 如何在顺风弯曲中对齐按钮？

tailwind-css - 如何在顺风弯曲中对齐按钮？

问题描述

我有这个输出：

定时器输出

我想要做的是将这两个按钮都居中在顶部，并将停止按钮居中在底部。

我还是 TailwindCSS 的新手，我猜我必须使用 flex，然后在该 flex div 下方的 div 中居中项目。

现在这是我的代码：

<div class="space-y-0">
        <div class="bg-green-300  w-32 px-2 py-2 rounded-r-2xl mt-2 mr-2 mb-2 align-content-center">
            <img src="{% static 'sample/eko.jpg' %}" class="w-32 rounded-r-2xl">
            <div class="align-content-center text-center text-green-800">Eko S. W</div>
        </div>
        <div class="bg-blue-300 mr-2 w-32">
            <div class="p-2 flex content-start">
                <button>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="green">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                    </svg>
                </button>
                <button>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="green">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11.5V14m0-2.5v-6a1.5 1.5 0 113 0m-3 6a1.5 1.5 0 00-3 0v2a7.5 7.5 0 0015 0v-5a1.5 1.5 0 00-3 0m-6-3V11m0-5.5v-1a1.5 1.5 0 013 0v1m0 0V11m0-5.5a1.5 1.5 0 013 0v3m0 0V11" />
                    </svg>
                </button>
            </div>
            <div class="text-center font-bold text-2xl text-white">04:51</div>
            <div class="flex items-stretch p-2 items-center">
                <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                    Stop
                </button>
            </div>
        </div>
    </div>

标签： tailwind-css

解决方案

如您所见，我使用了flex

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"/>
<div class="space-y-0">
        <div class="bg-green-300  w-32 px-2 py-2 rounded-r-2xl mt-2 mr-2 mb-2 align-content-center">
            <img src="{% static 'sample/eko.jpg' %}" class="w-32 rounded-r-2xl">
            <div class="align-content-center text-center text-green-800">Eko S. W</div>
        </div>
        <div class="bg-blue-300 mr-2 w-32">
            <div class="p-2 flex flex-col justify-center">
               <div class="mx-auto"><button >
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="green">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                    </svg>
                </button>
                <button>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="green">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11.5V14m0-2.5v-6a1.5 1.5 0 113 0m-3 6a1.5 1.5 0 00-3 0v2a7.5 7.5 0 0015 0v-5a1.5 1.5 0 00-3 0m-6-3V11m0-5.5v-1a1.5 1.5 0 013 0v1m0 0V11m0-5.5a1.5 1.5 0 013 0v3m0 0V11" />
                    </svg>
                </button></div> 
           
            <div class="text-center font-bold text-2xl text-white">04:51</div>
            
                <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                    Stop
                </button>
             </div>
        </div>
    </div>

推荐阅读