Question

美好的一天，我在创建具有css的html元素的特定结构时遇到了麻烦，如下所示：

我的尝试以此提议结束：

我尝试以编程方式执行此操作，但总是在我将数字和字符串之间的行高css属性设置为null时，div的整个内容自然会被推得更多，而我无法将其直接转到中间。即使像素推动它也可能很痛苦而且不准确。

<!DOCTYPE html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>


<style>
.circle
  {
   width: 100px;
   height: 100px;
   background: red; 
   -moz-border-radius: 50px; 
   -webkit-border-radius: 50px; 
   border-radius: 50px;
  }
</style>

<body>

<div style="margin-left:100px;">
<div align="center" class="circle">
<h1>9</h1>
<p>LEVEL</p>
</div>
</div>

</body>

</html>

我尝试使用任何边距或高度属性，但没有正面结果。这是我现在看的问题：

您是否知道如何以编程方式修复它？（任何其他类似的问题对我没有帮助，谢谢你的时间）

Answer 1

您可以使用line-height: 1以使每个元素的行高与其字体大小相匹配，从h1和p中删除默认边距，然后使用flexbox垂直和水平居中圆圈中的内容。

btw不推荐使用align属性。你应该使用CSS，而不是HTML。

* {margin:0;}
.circle {
  width: 100px;
  height: 100px;
  background: red;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  line-height: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

<div style="margin-left:100px;">
  <div class="circle">
    <h1>9</h1>
    <p>LEVEL</p>
  </div>
</div>

Answer 2

标记：

<div class="level-container">
  <span class="number">9</span>
  <span class="level">level</span>
</div>

SCSS：

.level-container {
  background-color: gray;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;

  .number,
  .level {
    align-self: center;
    justify-self: center;
    line-height: 0;
    margin: 20px;
  }

  .number {
    font-size: 60px;
  }

  .level {
    font-size: 30px;
  }
}

与迈克尔的解决方案类似，但我的演示使容器内的内容具有line-height: 0;

Demo

如何将div文本元素置于零行高的中心？

2 个答案: