CODEWITHSUNDEEP
reactjsjsxtailwind-css
Vegeta
Vegeta

Reputation: 119

How to vertically align button content and the icon in the same line and icon on the extreme right of button in tailwindcss?

I am trying to align the button content and the icon in the same line

<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>

Please check the rendering

enter image description here

Upvotes: 1

Views: 2074

Answers (2)

ptts
ptts

Reputation: 2086

<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>

Tailwind Play: https://play.tailwindcss.com/Nq0OF7CWpk

Result:

enter image description here

Upvotes: 1

Iman
Iman

Reputation: 571

add these style and set width and height to button:

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

add margin-left: auto; to Icon and remove float: right

now just you convert this code to react.

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>

Upvotes: 0

Related Questions