CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbuttonbootstrap-4
mastersuse
mastersuse

Reputation: 988

How to make text centered in middle of a button?

How to make the text centered in middle of a button as image below? I have applied class below but it's not working.

enter image description here

<div class="row text-center">
    <div class="col-lg-6 align-items-center">
        <a href="#" class="btn btn-outline-index font-30">Home Product</a>
    </div>
    <div class="col-lg-6 justify-content-center">
        <a href="#" class="btn btn-outline-index font-30">Mobile Product</a>
    </div>
</div>

.btn-outline-index {
  color: #c76626;
  background-color: transparent;
  background-image: none;
  border: 4px solid #c76626;
  font-weight: 400;
  border-radius: 50px;
  height:150px;
  width:400px;
}

Upvotes: 0

Views: 121

Answers (1)

Viral
Viral

Reputation: 949

You just need to add display: flex;align-items: center; justify-content: center; to your buttons CSS. You can learn more about the flexbox layout from the below link.

https://www.w3schools.com/css/css3_flexbox.asp

@import "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css";

.btn-outline-index {
  color: #c76626;
  background-color: transparent;
  background-image: none;
  border: 4px solid #c76626;
  font-weight: 400;
  border-radius: 50px;
  height:150px;
  width:400px;
  display: flex;
  justify-content: center;
  align-items: center;
}
<div class="row text-center">
    <div class="col-lg-6 align-items-center">
        <a href="#" class="btn btn-outline-index font-30">Home Product</a>
    </div>
    <div class="col-lg-6 justify-content-center">
        <a href="#" class="btn btn-outline-index font-30">Mobile Product</a>
    </div>
</div>

I hope this helps.

Upvotes: 1

Related Questions