How can I center text inside buttons on my webpage?

[amazezones]

Hi

how can I center text inside buttons. Currently its like 

I want it to be like

my code is 

      <hr>         

  <div class="product_tags">

                  <lable>Search by Tags:</lable></br></br>

               {% for tag in product.tags %}

                 <a class="link" href="/collections/all/{{ tag | handle }}" rel="tag" style="text-decoration: none" >

                   <span>{{ tag }}</span>

                 </a>

               {% endfor %}

</div>  

      <hr>

       <style>

            .product_tags a.link {

            color: #000000;

            background: #FFFFFF;

            border: 1px solid #000000;

            border-radius: 3px;

            min-width: 35px;

            min-height: 35px;

            padding: 0 9px;

            margin-bottom: 5px;

            line-height: 18px;

            }

            .product_tags a.link:hover {

              background-color: #42bbec;

              color: white;

}

         } 

       </style>

[KetanKumar]

@amazezones 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!😊
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

[Mgroup]

Hello,

To solve this issue you can add to the ".product_tags a.link" code bellow:

            display: flex;
            justify-content: center;
           align-items: center;
Or you can replace your code from <style> to </style> with code bellow (it already updated)
       <style>
            .product_tags a.link {
            color: #000000;
            background: #FFFFFF;
            border: 1px solid #000000;
            border-radius: 3px;
            min-width: 35px;
            min-height: 35px;
            padding: 0 9px;
            margin-bottom: 5px;
            line-height: 18px;
            display: flex;
            justify-content: center;
            align-items: center;
            }

            .product_tags a.link:hover {
              background-color: #42bbec;
              color: white;
}
         } 
       </style>
It should be enough.
If my answer can help you solve your issue, please mark it as a solution. Thank you and good luck.

[amazezones]

It works... but now each buttons are in 1 line... 

what I want is like 

[Mgroup · Accepted solution]

Hello,

I adjusted the code, and now your buttons will looks like on screenshot below: 

<style>
.product_tags{
	display: flex;
	flex-wrap: wrap;
	}
	.product_tags lable{
		width: 100%;
	}
	.product_tags a.link {
	color: #000000;
	background: #FFFFFF;
	border: 1px solid #000000;
	border-radius: 3px;
	min-width: 35px;
	min-height: 35px;
	padding: 0 9px;
	margin-bottom: 5px;
	line-height: 18px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: fit-content;
	margin-right: 5px;
	}

	.product_tags a.link:hover {
	  background-color: #42bbec;
	  color: white;
}
 } 
 </style>