遂记录下几个常用的方法，都比较简单。 水平居中直接加上<center>标签即可，或者设置margin:auto;当然...
965🦁啃下flex和tailwind的居中对齐 最近在啃Nuxt3,希望一套代码实现多端的统一,包括:Exe,Web,H5,App。 水平居中和垂直居中,是常见的布局,在Dreamweaver时代,是套table或div实现的,自从css3增加了flexbox后,事情变得简单了,但记忆起来却经常容易混淆,总是要试几下看看效果,而不能所想即所得。 flexbox的资料一...
<ahref="#"class="group block max-w-xs mx-auto rounded-lg p-6 bg-white ring-1 ring-slate-900/5 shadow-lg space-y-3 hover:bg-sky-500 hover:ring-sky-500"><divclass="flex items-center space-x-3"><svgclass="h-6 w-6 stroke-sky-500 group-hover:stroke-white"fill="none"viewBox...
div> <button class="flex-none flex items-center justify-center w-9 h-9 rounded-md text-slate-300 border border-slate-200" type="button" aria-label="Like"> <svg width="20" height="20" fill="currentColor" aria-hidden="true"> <path fill-rule="evenodd" clip-rule="evenodd" d="M...
(<divclassName={`py-2 text-xs flex items-center justify-between`}>// 👉 data represents each subgroup<spanclassName="font-bold">{data.label}</span><spanclassName="bg-gray-200 h-5 h-5 p-1.5 flex items-center justify-center rounded-full">{data.options.length}</span></div>)}/>);...
id} /> ))} </div> </div> ); The width will now be changed to be half the screen’s width. However, it will be much better to center it horizontally. To do that, we’ll use Tailwind’s margin utility classes. The margin classes are in the format m{side}-{value}, where ...
align-items flex-start | flex-end | center | baseline | stretch3.2.2 CSS布局元素(1)宽度width固定宽度 百分比宽度 最大宽度 最小宽度 水平居中 margin: auto(2)高度height固定高度(必须) 最大高度 最小高度 行高对齐 line-height(3)字体颜色color 十六进制、rgb、英文 大小font-size 粗细font-weight: bo...
logout() |> put_status(302) |> redirect(to: "/") end end The login/2 function redirects to the dwyl auth app. Read more about how to use the AuthPlug.get_auth_url/2 function. Once authenticated the user will be redirected to the / endpoint and a jwt session is created on the...
For example, notifications error messages in top center and generic app notifications in bottom-right corner. <NotificationGroup group="error"> <div class="fixed inset-0 flex items-start justify-end p-6 px-4 py-6 pointer-events-none" > <div class="w-full max-w-sm"> <Notification v-...
<div class="bg-green-300 text-red-500 text-center px-24 py-24"> Here is some content </div> At first, my reaction to that was no thanks. More code! What if I need this style another place3! How am I supposed to learn those 4,000 utility classes4? To me, it was akin to...