我试着用顺风CSS构建一个侧边栏菜单。但我无法像Li-Tag的文本一样将图标置于相同高度的中心。

<代码><；UL ID="；侧菜单"；类="；文本中心边框-B-2边框-灰色-200<；Li类="；边框-T-2边框-灰色-200 “ ”>；<；DIV href="；#"；类="；块指针指针块PY-3相对<；span类="；"；>；标题1<；/span>；<；SVG xmlns="；http：//www.w3.org/2000/svg"类="；H-4 W-4绝对右-1顶部-1/2"；填充=“无”viewbox="；002424"；笔画="；当前颜色"；>；<；path stroke-lineCap="；round"；stroke-linejoin="；圆形"；笔画宽度="；2"；D="；M19 9L-7 7-7-7"；/>；<；/SVG>；<；/DIV>；<；UL类="；BG-灰色-50边框-T-2边框-灰色-100"；>；<；Li类="；PY-2"；>；子项-1<；/Li>；<；Li类="；PY-2"；>；子项-2<；/Li>；<；Li类="；PY-2"；>；子项-3<；/Li>；<；/UL>；<；/Li>；<；Li类="；边框-T-2边框-灰色-200"；>；<；span类="；块PY-3指针"；>；标题2<；/span>；<；/Li>；<；Li类="；边框-T-2边框-灰色-200"；>；<；span类="；块PY-3指针"；>；标题3<；/span>；<；/Li>；<；/UL>；

下面是一个例子，它现在看起来如何：https：//jsfiddle.net/j6y3sznq/

顺晟科技：

类 <ul id="sidemenu" class="text-center border-b-2 border-gray-200"> <li class="border-t-2 border-gray-200"> <div href="#" class="block cursor-pointer block py-3 relative"> <span class="">Title 1</span> <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 absolute right-1 top-1/2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /> </svg> </div> <ul class="bg-gray-50 border-t-2 border-gray-100"> <li class="py-2">Sub-Item-1</li> <li class="py-2">Sub-Item-2</li> <li class="py-2">Sub-Item-3</li> </ul> </li> <li class="border-t-2 border-gray-200"> <span class=" block py-3 cursor-pointer">Title 2</span> </li> <li class="border-t-2 border-gray-200"> <span class=" block py-3 cursor-pointer">Title 3</span> </li> </ul> 缺少transform属性，请考虑添加.top-1\/2以使其居中。

<代码>.TOP-1\/2{转换：TranslateY（-50%）；}

更新了小提琴

解决方案二：顺风类名。只需将transform: translateY(-50%)添加到SVG元素。

<代码><；link rel=“ stylesheet ” href=“ https：//cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.15/tailwind.min.css ”>；<；UL ID=“ sidemenu ” Class=“ text-center border-B-2 border-gray-200 ”>；<；Li Class=“ border-t-2 border-gray-200 ”>；<；DIV href=“#” Class=“块指针指针块PY-3相对”>；<；SPAN CLASS=“ ”>；标题1<；/SPAN>；<；SVG xmlns=“ http：//www.w3.org/2000/svg ” Class=“ H-4 w-4 absolute right-1 top-1/2 transform-translate-y-2/4 ” fill=“ none ” viewbox=“ 002424 ” stroke=“ currentColor ”>；<；路径stroke-linecap=“ round ” stroke-linejoin=“ round ” stroke-width=“ 2 ” d=“ M19 9L-7 7-7-7 ”/>；<；/SVG>；<；/DIV>；<；UL CLASS=“ BG-gray-50 border-t-2 border-gray-100 ”>；<；Li类别=“ PY-2 ”>；子项-1<；/Li>；<；Li类别=“ PY-2 ”>；子项-2<；/Li>；<；Li类别=“ PY-2 ”>；子项-3<；/Li>；<；/UL>；<；/Li>；<；Li Class=“ border-t-2 border-gray-200 ”>；<；SPAN CLASS=“ BLOCK PY-3光标指针”>；标题2<；/SPAN>；<；/Li>；<；Li Class=“ border-t-2 border-gray-200 ”>；<；SPAN CLASS=“ BLOCK PY-3光标指针”>；标题3<；/SPAN>；<；/Li>；<；/UL>；

更新了小提琴