html - 在 HTML 中将文本与标题标签 (h2) 对齐

标签 html css web

我有这段代码:

<div class="row margin-bt-5">
   <div class="col-xs-4 ft-bold">Name  &nbsp;:</div>
   <div class="col-xs-8">
      <h2>Content</h2>
   </div>
</div>

但是因为我有不同的字体大小,所以它们没有垂直对齐。我明白了:

enter image description here

如何将“名称”的中间与“内容”的中间对齐?谢谢

最佳答案

您可以对行使用 flex

.margin-bt-5 {
  display: flex;
  align-items: center;
}

.margin-bt-5 h2 {
  margin-top: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row margin-bt-5">
   <div class="col-xs-4 ft-bold">Name  &nbsp;:</div>
   <div class="col-xs-8">
      <h2>Content</h2>
   </div>
</div>

关于html - 在 HTML 中将文本与标题标签 (h2) 对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51608528/

上一篇:html - 将文本环绕成一个圆圈

下一篇:html - 图像在 HTML 中出现损坏

相关文章:

html - IE9 的 CSS 圆 Angular 问题

html - 在非全屏模式下将样式应用于 <video>

html - 导航栏中间的标志搞乱了导航的其余部分

Bootstrap 和 jquery ui 的 CSS 优先级问题

html - 内容现在换行和位置固定页脚

html - 如何将我计算机上的图像添加到 css 或 html 中的站点?

javascript - 为什么p标签的内容是什么都没有但长度却是1?

html - Div 边框和定位

android - 如何在 android 中预填充 Web 表单?

php - 如何防止提交联系表单后弹出 PHP 文件?