Как сделать так, чтобы текст располагался по центру кнопки? - PullRequest
Новая
       44

Как сделать так, чтобы текст располагался по центру кнопки?

0 голосов
/ 01 февраля 2020

Как сделать так, чтобы текст располагался по центру кнопки, как показано на рисунке ниже? Я применил класс ниже, но он не работает.

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

1 Ответ

2 голосов
/ 01 февраля 2020

Вам просто нужно добавить display: flex;align-items: center; justify-content: center; к вашим кнопкам CSS. Вы можете узнать больше о макете flexbox по ссылке ниже.

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>

Надеюсь, это поможет.

...