使用 role="button" 在 <a> 标记上水平居中标题文本

Posted 2023-03-06

【中文标题】使用 role="button" 在 <a> 标记上水平居中标题文本

【英文标题】：Centering header text horizontally on an <a> tag with role="button"

【发布时间】：2020-11-07 05:48:24

【问题描述】：

我是 html 和堆栈溢出的新手。我现在正在学习一门专注于引导框架的课程。有没有一种方法可以在已分配角色 =“按钮”的 a 标记中将标题文本居中？

我尝试使用常规文本，文本出现在我想要的位置，但字体粗细太轻。我试着让它加粗，但这让它太重了。 h6 标签给了我理想的重量，但我无法将它水平居中，因为它出现在顶部。最好，如果可能的话，我想使用引导程序。

以下是我当前的代码：

<div class="col col-sm align-self-center">
          <a href="#reservationForm" class="btn btn-warning btn-block btn-sm p-2" role="button"><h6 class="text-center">Reserve Table</h6></a>
</div>

【问题讨论】：

你在使用引导程序吗？

【参考方案1】：

你可以使用bootstrap中的文本对齐类

<div class="col col-sm align-self-center text-center">

【参考方案2】：

首先：a 是 inline 元素，h6 是 block 元素。 Block 元素在 inline 元素内无效。

将您的a 放入h6 并在h6 上使用引导类text-center；

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

<header>
    <div class="col col-sm align-self-center">
        <h6 class="text-center">
          <a href="#reservationForm" class="btn btn-warning btn-block btn-sm p-2" role="button">
            Reserve Table
          </a>
        </h6>
    </div>
</header>

本示例基于 Bootstrap v4.5

【讨论】：

非常感谢。效果很好。感谢您对块和内联元素的提醒?