0

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;
}
yusufmalikul
  • 508
  • 1
  • 9
  • 26
mastersuse
  • 936
  • 1
  • 15
  • 35
  • Does this answer your question? [CSS center text (horizontally and vertically) inside a div block](https://stackoverflow.com/questions/5703552/css-center-text-horizontally-and-vertically-inside-a-div-block) – Roberto Zvjerković Feb 01 '20 at 08:20

1 Answers1

1

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.

Viral
  • 935
  • 1
  • 9
  • 22