【问题标题】：How to make text centered in middle of a button?如何使文本在按钮中间居中？
【发布时间】：2020-02-01 08:19:28
【问题描述】：
如何使文本在按钮中间居中，如下图所示？我已经申请了下面的课程，但它不起作用。
<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;
}
【问题讨论】：
标签：
html
css
twitter-bootstrap
button
bootstrap-4
【解决方案1】：
您只需将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>
我希望这会有所帮助。