使用 HTML div 中的引导程序水平和垂直居中文本

Posted 2023-03-14

【中文标题】使用 HTML div 中的引导程序水平和垂直居中文本

【英文标题】：Center text horizontally and vertically using bootstrap in HTML div

【发布时间】：2017-09-19 19:12:21

【问题描述】：

您好，我正在尝试为 freecodecamp 完成此页面，但我遇到了一些细节问题。

Here's my code

我试图让“马丁路德金小民权英雄和偶像”标题在 div 中垂直居中。我还尝试将 h3 标签“小马丁路德金生平时间线”水平居中。

我试过 text-align:center;和文本中心引导类。两者似乎都不起作用。我还尝试添加 !important 以查看引导类是否可能以某种方式覆盖它。有什么想法吗？

html：

<h1 class="display-2 text-center">Martin Luther King Jr</h1>
    <h3 class="text-center text-muted font-italic">civil rights hero and icon</h3>

【参考方案1】：

由于您使用的是弹性框 - 您可能希望利用 align-items 和 justify-content 属性。

这是稍微更新的标记和 css

HTML

<div class="col centered-content" style="border-style:solid;border-color:grey;border-radius:20px;background-color:white!important;background-color: white;">
    <div class="centered-content__inner">
        <h1 class="display-2 text-center" style="">Martin Luther King Jr</h1>
        <h3 class="text-center text-muted font-italic">civil rights hero and icon</h3>
    </div>
</div>

CSS：

.centered-content 
    display: flex;
    justify-content: center;
    align-items: center;

.centered-content__inner 
    background: none;

更多关于使用 flex box here的内容居中

希望这会有所帮助:)

【讨论】：

谢谢！这对我有用。我没有意识到 css 的居中是一个这样的问题，所以感谢这个解决方案！

Algoods 很乐意为您提供帮助。请记住，弹性盒子过去有不同的语法，旧版本的浏览器支持，请参阅此链接以了解主要浏览器对弹性盒子的整体采用情况：caniuse.com/#feat=flexbox

【参考方案2】：

将具有row 类的 div 显示为表格，并将两个子项显示为表格单元格。然后你可以应用垂直对齐中间

.row
  display:table

.row .col,.row .col-5
  display:table-cell;

.centered div:first-child
  width: 100%;
  text-align:center;

click here for demo