主页 / 问题 / 1076876
Accepted
Сергей Плотницкий
Asked:2020-02-01 04:38:17 +0000 UTC2020-02-01 04:38:17 +0000 UTC

将文本垂直居中对齐

  • 772

我想在圆圈内绘制文字，但如何将其与垂直中心对齐？

<div style="margin: 0px auto; border-radius: 100%; color: #09ab8d; border: 2px solid #09ab8d; width: 60px; height: 60px; font-weight: bold; font-size: 25px; text-align: center;">1</div>

html

2 个回答

  1. Best Answer

    在问题中显示的情况下，您可以添加line-height:60px

    .circle {
  margin: 0px auto;
  border-radius: 100%;
  border: 2px solid ;
  width: 60px;
  height: 60px;
  font-size: 25px;
  text-align: center;
  line-height: 60px
}
    <div class="circle">1</div>

    • 3

  2. 使用display: flex- 里面的文本将始终位于中心和中间，具体取决于父块的大小

    .circle {
    margin: 0px auto;
    border-radius: 100%;
    color: #09ab8d;
    border: 2px solid #09ab8d;
    width: 60px;
    height: 60px;
    font-weight: bold;
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}
    <div class="circle">1</div>

    • 2

相关问题