同一行文字字体大小不同,如何实现垂直居中

Gavin Wu 2023年01月02日 8:01 HTML/CSS 86 Views

在写一些标题的时候想添加个置顶文字,就加了个span,但搞了半天,由于字体大小不一样,就是不居中。
同一行文字字体大小不同,如何实现垂直居中|微言心语
下面是原来的代码片断。

1
2
3
4
<h2 class="entry-title-top">
                <span title="首页置顶" >置顶</span>
                <a href="#"  rel="bookmark">中华民族的伟大复兴</a>
</h2>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.entry-title-top {
  line-height: 26px;
  height     : 26px;
}
.entry-title-top a {
  color                  : #313131;  
}

.entry-title-top span {
  background    : rgb(230, 20, 90);
  color         : #fff;  
  font-size     : 14px;
  padding       : 0px 6px;
  border-radius : 3px;  
}

后来通过一个简单的方法vertical-align: middle就解决了。就是给每个子窗口都添加vertical-align: middle来解决的。
修改后的效果是这样的

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注