如何在tailwindcss中垂直对齐按钮内容和同一行中的图标和按钮最右边的图标？答案

【问题标题】：How to vertically align button content and the icon in the same line and icon on the extreme right of button in tailwindcss?如何在tailwindcss中垂直对齐按钮内容和同一行中的图标和按钮最右边的图标？
【发布时间】：2021-07-09 08:54:13
【问题描述】：

我正在尝试将按钮内容和图标对齐在同一行

<button key={index}
                             className="focus:outline-none font-sans bg-white border border-gray-300 hover:bg-gray-100 text-left text-gray-700 px-2 py-2 rounded"
                             onClick = {(e) =>
                            {
                                e.preventDefault();
                                window.open(element.url,"_blank")
                            } }
                            >        
                                        <span className="px-1">{element.title}</span>
                                        <Icon className="text-gray-700 float-right" name={topic.icon } /> 
                                  
                             </button>

请检查渲染

【问题讨论】：

标签： reactjs jsx tailwind-css

【解决方案1】：

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

<div class="p-5 flex flex-wrap justify-center items-center gap-2">
  <button class="flex items-center justify-between focus:outline-none font-sans bg-white border border-gray-300 hover:bg-gray-100 text-left text-gray-700 px-4 py-2 rounded">
    <span class="px-1">Using GCP Environment</span>
    <svg xmlns="http://www.w3.org/2000/svg" class="ml-2 text-gray-700 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 11l7-7 7 7M5 19l7-7 7 7" />
    </svg>
  </button>
  <button class="flex items-center justify-between focus:outline-none font-sans bg-white border border-gray-300 hover:bg-gray-100 text-left text-gray-700 px-2 py-2 rounded">
    <span class="px-1">Creating New Instance</span>
    <svg xmlns="http://www.w3.org/2000/svg" class="ml-2 text-gray-700 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 11l7-7 7 7M5 19l7-7 7 7" />
    </svg>
  </button>
</div>

顺风游戏： https://play.tailwindcss.com/Nq0OF7CWpk

结果：

【讨论】：

【解决方案2】：

添加这些样式并将width 和height 设置为按钮：

width: 100px;
height: 100px;
display: flex;
align-item: center;
justify-content: center;

将margin-left: auto;添加到Icon并删除float: right

现在只需将此代码转换为反应。

button {
  width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
}

i{
margin-left: auto;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>

  <button>
<span> test </span>
<i class="glyphicon glyphicon-remove"></i>
</button>


</body>

</html>

【讨论】：

我正在动态渲染来自 json 文件的文本按钮，所以我无法预先固定宽度和高度 @Iman Amini
你能设置最小宽度吗？