如何将零线高度的div文本元素居中？

美好的一天，我与使用CSS创建HTML元素看起来的具体结构麻烦如下：如何将零线高度的div文本元素居中？

我tryings与此结束建议：

我试着以编程的方式来做，但总是当我将数字和字符串之间的行高CSS属性设置为空时，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>

我试图使用任何边距或高度属性，但没有积极的结果。这是我的问题，现在怎么看：

你有任何想法如何编程修复它？（任何其它类似的问题didn't帮我，感谢您的时间）

来源

2017-03-03 Marek Bernád

标记：

<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

来源

2017-03-03 23:15:44

感谢您的回答与线高度：0 ......这对我有用，我会记住你的解决方案，再次感谢 –

您可以使用line-height: 1让每一个元素的行高匹配它的字体大小，请从h1和p默认边距，然后用Flexbox的垂直和水平居中圆内容。

align属性已被弃用btw。你应该使用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>

来源

2017-03-03 23:11:22

哈哈哈：d ..我永远不会让这对我自己这样的..好的，谢谢你..这就是正确的答案对我来说 –

如何将零线高度的div文本元素居中？

回答

相关问题