Bootstrap导航中<a>标签文本无法居中，<button>正常的问题咨询

Let's walk through exactly what's going on here and get your links looking consistent with your button.

First, The Root Causes #

1. Invalid HTML: Duplicate class Attributes
   Look at your <a> tags—you've got two separate class attributes (e.g., class="nav-link" and class="btn content-div__button--blue btn-sm"). Browsers ignore duplicate attributes, so only one set of classes is being applied (usually the last one), which breaks your styling consistency right out the gate.

2. Element Default Display Differences
   <button> elements default to inline-block, which lets your width, height, and padding styles work as expected. <a> tags default to inline, which doesn't respect width/height properly, and messes with how text is positioned.

3. Bootstrap Class Conflicts
   The nav-link class adds its own padding, line-height, and display rules that clash with your custom button styles and Bootstrap's own btn class. Nav links are meant for standard navigation items, not button-styled actions.

4. Inefficient Vertical Centering
   Using padding-top and padding-bottom to center text is hit-or-miss, especially when mixing element types. It doesn't account for default line-height differences between <a> and <button>.

Step-by-Step Fixes #

1. Fix Your HTML Class Attributes

First, merge duplicate class attributes into one, and remove the conflicting nav-link class (since you want button-style links, not standard nav links):

<!-- Before (broken) -->
<a class="nav-link" [routerLink]="signupRouterLink" id="signup-link" class="btn content-div__button--blue btn-sm">Sign Up</a>

<!-- After (fixed) -->
<a [routerLink]="signupRouterLink" id="signup-link" class="btn content-div__button--blue btn-sm">Sign Up</a>

Do this for all your profile and signout links too.

2. Update Your Custom CSS for Reliable Centering

Replace your padding-based vertical centering with line-height (since your button height is fixed at 40px), and explicitly set display: inline-block to match <button>'s default behavior:

.content-div__button--blue {
  background-color: #4da3f8;
  border: none;
  color: white;
  border-radius: 8px;
  width: 100px;
  height: 40px;
  box-sizing: border-box;
  text-align: center;
  /* Replace padding with line-height for consistent vertical centering */
  line-height: 40px;
  /* Ensure <a> behaves like <button> for layout */
  display: inline-block;
  /* Remove padding-top/padding-bottom to avoid conflicts */
}

3. Verify Bootstrap Button Synergy

Bootstrap's btn class already handles display: inline-block and basic button styling, so combining it with your custom class will ensure both <a> and <button> elements render identically.

Why This Works #

• Merging classes fixes the browser's broken style parsing.
• Removing nav-link eliminates style conflicts between navigation and button rules.
• line-height: 40px matches your element's height, guaranteeing vertical text center for any inline-block/block element.
• Explicit display: inline-block makes <a> behave exactly like <button> in terms of layout, so your width/height rules apply consistently.

After making these changes, your "Sign Up", "My Profile", and "Sign Out" links should center text just like your "Sign In" button.

内容的提问来源于stack exchange，提问作者Manu Chadha