将文本在圆形按钮上居中

沃梦达教程前端问题

2022-09-07

centering text on circle button(将文本在圆形按钮上居中)

本文介绍了将文本在圆形按钮上居中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想创建一个内部带有文本的按钮圆形链接，但我无法将圆形按钮内的文本居中。线条高度太大。对这个问题有什么建议吗？

代码如下：https://jsfiddle.net/hma443rL/ 数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

.btn-donate {
  background: #97c83e;
  text-align: center;
  width: 149px;
  height: 148px;
  border-radius: 100%;
  display: inline-block;
  font-size: 35px;
  line-height: 2.3;
  vertical-align:middle;
  color: white;
  font-weight: bold;
  text-decoration: none
}

<a href="" class="btn btn-donate">
  Donate <span>Us</span>
</a>

我正在尝试创建这样的按钮

推荐答案

Flexbox可以做到这一点：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

.btn-donate {
  background: #97c83e;
  text-align: center;
  width: 149px;
  height: 149px;
  border-radius: 100%;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 35px;
  color: white;
  font-weight: bold;
  text-decoration: none
}

<a href="" class="btn btn-donate">Donate <span>Here</span></a>

这篇关于将文本在圆形按钮上居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

沃梦达教程

本文标题为：将文本在圆形按钮上居中

上一篇：调度名称中带有点的CustomEvent不会触发jQuery.on()事

下一篇：通过css将页眉标签与固定高度垂直对齐

基础教程推荐

学习HTML

学习jQuery

学习Laravel

学习CSS3

学习Vue.js

学习Bootstrap5

学习ThinkPHP

学习AJAX