中心跨度/文本在h1内垂直 [英] Center span/text vertically inside h1

问题描述

我想将span元素置于h1标记中心。我试图设置一个行高，但它似乎只中心跨度，但不是旁边的文本。注意：我可能不能使用位置绝对，因为图标不总是显示，它可以有不同的宽度。

看到我创建的小提琴： a href =http://jsfiddle.net/JJhCY/1/ =nofollow> http://jsfiddle.net/JJhCY/1/

html：

 < h1> 
< span class =icon>图标< / span> 
一些与图标相关的文本
< / h1> 
  

CSS：

 code> .icon 
 {
 background：aqua; 
 border：1px solid blue; 
 font-size：80％; 
 border-radius：3px; 
 width：40px; 
 line-height：13px; 
 padding：2px; 
 display：inline-block; 
 text-align：center; 
} 
 
 
 h1 
 {
 background：red; 
 font-size：11px; 
 line-height：18px;任何想法？

 
 
 
 h2_lin>解决方案
您的CSS基本上可以工作。更明显的是，如果增加行高：
 
 
 
请参见 http://jsfiddle.net/audetwebdesign/PUeaY/  
  h1 {
 background：red; 
 font-size：40px; 
 line-height：80px; 
} 
 .icon {
 background：aqua; 
 border：1px solid blue; 
 border-radius：3px; 
 padding：0px 4px; 
 width：auto; 
 display：inline-block; 
 font-size：20px; 
 line-height：40px; 
 vertical-align：7px; 
} 
  
在此示例中，span和文本都在中心垂直对齐
 
 
 
如何工作... 
 
 
 
 CSS引擎使用
 
 
 
在这种情况下，我为设置了默认的font-size和line-height， 
 
 
 
对于 .icon ，我减少font-size和line-height减少50％。如果 vertical-align 设置为 baseline 或 0 较小和较大的文本将沿着字母的底部对齐，但是它不会看起来居中，因为图标文本具有较小的字体大小。
 
 
 
通过调整 vertical-align 到7px，我有一个中心，看起来不错。这不是一个精确的过程，但它可以工作得很好。
 
I'd like to center a span element inside a h1 tag. I tried to to set a line-height but it seems to center only the span but not the text next to it. Note: I probably can't use position absolute as the "icon" is not displayed always and it can have different widths.

See the fiddle I've created: http://jsfiddle.net/JJhCY/1/

html:
<h1>
    <span class="icon">Icon</span>
    Some Text related to the icon 
</h1>  
CSS:
  .icon 
    {
    background: aqua;
    border: 1px solid blue;
    font-size: 80%;
    border-radius: 3px;
    width: 40px;
    line-height: 13px;
    padding: 2px;
    display: inline-block;
    text-align: center;
    }


    h1
    {
    background: red;
    font-size: 11px;
    line-height: 18px;
    }
any idea?
解决方案
Your CSS basically works.  It is more obvious if you increase the line-height:

see demo at http://jsfiddle.net/audetwebdesign/PUeaY/
h1 {
    background: red;
    font-size: 40px;
    line-height: 80px;
}
.icon {
    background: aqua;
    border: 1px solid blue;
    border-radius: 3px;
    padding: 0px 4px;
    width: auto;
    display: inline-block;
    font-size: 20px;
    line-height: 40px;
    vertical-align: 7px;
}
In this example, both the span and the text are vertically aligned in the center, which I think is what you want.

How This Works...

The CSS engine uses the vertical-align property to align the baseline of the text segments.

In this case, I set the default font-size and line-height for h1 to 40px and 80px respectively.

For the .icon, I reduce the font-size and line-height by 50%.  If vertical-align were set to baseline or 0, both the smaller and the larger text would align along the bottom of the letters, but it would not look centered because the icon text has a smaller font size.

By adjusting vertical-align to 7px, I got a centering that looks pretty good.  This is not exactly a precise process, but it may work well enough.

                        
这篇关于中心跨度/文本在h1内垂直的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！