设为首页 - 加入收藏 ASP站长网(Aspzz.Cn)- 科技、建站、经验、云计算、5G、大数据,站长网!
热搜: 创业者 数据 手机
当前位置: 首页 > 综合聚焦 > 资源网站 > 资源 > 正文

html – h1上的vertical-align只是不起作用?

发布时间:2021-01-01 02:17 所属栏目:34 来源:网络整理
导读:
导读:我试图将h1中的文本垂直对齐到中间,看到文本可能会换行,无论是1行还是2行都需要看起来很好看. 这是我使用的CSS: h1 { font-size: 12pt; line-height: 10pt; min-height: 30px; vertical-align: middle;} html非常简单: h1title/h1 无论我为vertical-align

我试图将h1中的文本垂直对齐到中间,看到文本可能会换行,无论是1行还是2行都需要看起来很好看.

这是我使用的CSS:

h1 {
  font-size: 12pt;
  line-height: 10pt;
  min-height: 30px;
  vertical-align: middle;
}

html非常简单:

<h1>title</h1>

无论我为vertical-align输入什么值,文本始终位于h1元素的顶部.

我错过了解垂直对齐属性吗?

解决方法

不需要CSS黑客攻击.如果我理解正确,那么你可以使用这个CSS:
h1 {
    font-size: 12pt;
    line-height: 10px;
    padding: 10px 0;
}

见demo fiddle,最小高度为30px;

关于垂直对齐的注释:该样式仅与 – 一起使用 – 并且相对于 – 线高度样式计算.因此,将行高设置为10px,放置高度为12pt的文本时,根本不会对齐任何空间.但是将行高设置为30px会导致更多行文本之间的空间过大. This shows a trick用于垂直对齐多行文本,但只有在具有固定高度的容器时才需要.在这种情况下,容器的高度(h1元素)是流动的,因此您可以使用这种简单的填充解决方案.

(编辑:ASP站长网)

    网友评论
    推荐文章
      热点阅读