首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >标题内垂直对齐Bootstrap徽章

标题内垂直对齐Bootstrap徽章
EN

Stack Overflow用户
提问于 2013-10-18 22:25:25
回答 2查看 26.3K关注 0票数 32

当我在标题中使用Bootstrap badge时,例如h1h2h3,垂直对齐是关闭的。badge与标题文本的底部对齐。我希望徽章与标题文本垂直居中对齐。

HTML

代码语言:javascript
复制
<h1><span class="badge">badge</span> Heading 1</h1>
<hr>
<h2><span class="badge">badge</span> Heading 2</h2>
<hr>
<h3><span class="badge">badge</span> Heading 3</h3>

CSS

代码语言:javascript
复制
h1,h2,h3 {
  vertical-align:middle;
}

h1>.badge, h2>.badge, h3>.badge {
  vertical-align:middle;
}

Result..

查看这个引导程序:http://bootply.com/88526

我怎么才能让这个垂直对齐?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-10-18 22:38:41

一直讨厌这个问题。

有点老生常谈,但这是有效的:

代码语言:javascript
复制
h1 { font-size: 2em; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.4em; }
h1,h2,h3 {
    vertical-align:middle;
}

  h1>.badge, h2>.badge, h3>.badge {
    vertical-align:middle;
    margin-top: -0.5em;
}

定义了用于演示目的的标题字体大小

票数 25
EN

Stack Overflow用户

发布于 2018-04-23 23:04:31

在Bootstrap 4中,垂直对齐问题不再是问题,因为徽章将继承包含标题的大小。

代码语言:javascript
复制
<div class="container">
  <h1><span class="badge badge-pill badge-dark">badge</span> Heading 1</h1>
  <hr>
  <h2><span class="badge badge-pill badge-dark">badge</span> Heading 2</h2>
  <hr>
  <h3><span class="badge badge-pill badge-dark">badge</span> Heading 3</h3>
</div>

但是,align-middle类用于在标题外垂直对齐徽章。

代码语言:javascript
复制
<div class="container">
  <span class="badge badge-pill badge-dark align-middle">badge</span> <span class="h1 align-middle">Heading 1</span>
  <hr>
  <span class="badge badge-pill badge-dark align-middle">badge</span> <span class="h2 align-middle">Heading 2</span>
  <hr>
  <span class="badge badge-pill badge-dark align-middle">badge</span> <span class="h3 align-middle">Heading 3</span>
</div>

演示:https://www.codeply.com/go/rE0z3665zh

票数 7
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/19452111

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档