Center Button Text Without Magic Numbers

Build a CSS button whose label stays centered across three typefaces.

Introduction

30 Second Summary

Equal padding can still leave a button label looking too low. A tiny manual nudge may fix one font while making the next font look worse.

In this project, you will build a button in a single HTML file. You will use CSS text-box properties to center its label without hand-tuned spacing.

What You'll Build

You will open a side-by-side button comparison where three different typefaces stay centered with the same padding values.

By the end of this project, you'll have:

A measurable before-and-after comparison that shows the space above and below a button label.
A font-resistant button whose label stays centered across serif and sans-serif typefaces.
An icon-and-label layout that keeps both elements on the same centre line.
A fallback-ready component with an optional Secret Mission to push your skills further.

Are there any prerequisites?

Basic CSS knowledge is enough for this project. Familiarity with browser DevTools helps when you measure the label spacing.

Before We Start

This button experiment lives in one local HTML file. Chrome DevTools supplies the measurements that reveal uneven space around the label.

Visual Studio Code gives the file a clear workspace on your Desktop. Google Chrome can load the file directly from your computer.

In this step, get ready to:

Prepare Visual Studio Code for editing the project.
Prepare Google Chrome for testing the project.
Create a local HTML file that opens with Chrome DevTools.

Get your local tools ready

The project needs an editor that manages local files. Start by checking whether Visual Studio Code is already available.

Press Cmd+Space on macOS or the Windows key on Windows to open your operating system search.
Type Visual Studio Code and press Enter.

✔️ Visual Studio Code opens

Good start. Your editor is available for the project file you create next.

Leave Visual Studio Code open.

ⓧ Visual Studio Code is not installed

Install Visual Studio Code using the instructions for your operating system.

macOS

Visit the Visual Studio Code download page.
Download the macOS .dmg installer.
Open the downloaded .dmg file.
Drag Visual Studio Code.app to the Applications folder.
Repeat the operating system search for Visual Studio Code.

You should now see Visual Studio Code open.

Windows

Visit the Visual Studio Code download page.
Download the User Installer for your computer.
Run the downloaded installer.
Follow the installation prompts.
Repeat the operating system search for Visual Studio Code.

You should now see Visual Studio Code open.

Chrome provides the browser window for each visual check. Its built-in developer tools let you inspect the button without installing an extension.

Press Cmd+Space on macOS or the Windows key on Windows to return to your operating system search.
Type Google Chrome and press Enter.

✔️ Google Chrome opens

Your browser is ready. You now have both local tools required for the project.

Leave Google Chrome open.

ⓧ Google Chrome is not installed

Install Google Chrome using the instructions for your operating system.

macOS

Visit the official Google Chrome installation guide.
Download the Chrome installation file.
Open the file named googlechrome.dmg.
Drag Chrome to the Applications folder.
Repeat the operating system search for Google Chrome.

You should now see Google Chrome open.

Windows

Visit the official Google Chrome installation guide.
Download the Chrome installation file.
Run the downloaded installation file.
Follow the on-screen instructions.
Repeat the operating system search for Google Chrome.

You should now see Google Chrome open.

Having trouble opening either tool?

Repeat the operating system search after the installation finishes. A newly installed app may not appear in results until the installer closes.

If either app still does not open, help me troubleshoot my editor or browser installation.

Create the project folder and file

A dedicated folder keeps the entire experiment in one place. The single file inside it becomes the snippet you build throughout the project.

Switch back to Visual Studio Code.
Click File in the top menu.

You should see the File menu open.

Select Open Folder....
Choose your Desktop in the folder picker.

The folder picker now shows the contents of your Desktop.

Select New Folder.

A field appears for the folder name.

Type center-button-text into the folder name field.
Press Enter to create the folder.

You should see the new center-button-text folder in the picker.

Select the center-button-text folder.
Click Open on macOS or Select Folder on Windows.

That is your workspace ready. You should see center-button-text at the top of the Explorer sidebar.

Click New File... in the Explorer toolbar.

A filename field appears beneath the project folder.

Type index.html into the filename field.
Press Enter to create the file.

You should see index.html in the Explorer sidebar. The empty file also opens in the editor.

Open the local file with DevTools

Chrome can load an HTML file straight from your computer. This keeps the test loop short because every saved edit can be checked in the browser.

Switch back to Google Chrome.
Press Cmd+O on macOS or Ctrl+O on Windows.

You should see a file picker for opening a local file.

Select your Desktop.
Open the center-button-text folder.

The picker now shows the index.html file.

Select index.html.
Click Open.

You should see a Chrome tab named index.html. Its empty page confirms that Chrome loaded the local file.

Before you open DevTools, do you expect Chrome to inspect a file loaded from your own computer?

Press Cmd+Option+C on macOS or Ctrl+Shift+C on Windows to open the Elements panel.

You should see Chrome DevTools beside the page. The Elements panel displays the document structure for index.html.

Local file or DevTools missing?

If the file does not open, confirm that you selected index.html from the center-button-text folder on your Desktop.

If DevTools stays closed, click once inside the Chrome page before repeating the shortcut. You can also ask for help opening my local HTML file or Chrome DevTools.

Your local workspace is ready. Next up, you will write the plain button that exposes the centering problem.

Build a Plain Button

Fonts reserve built-in vertical space around their letters. A plain button gives you a baseline for seeing how that space affects a label.

In this step, you will place one button in a single HTML file. You will apply one CSS padding value to all four sides before judging the result in the browser.

In this step, get ready to:

Create centered-button.html with one plain button.
Apply one CSS padding value to all four sides.
Capture the first browser rendering as baseline-button.png.

Set the equal-padding baseline

A single padding value keeps every edge under the same rule. This leaves the font's own vertical space as the only thing affecting how the label looks inside the button.

In your code editor, create centered-button.html inside the project folder from earlier.
Fill centered-button.html with the baseline button by pasting this code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Centered Button</title>
  <style>
    /* Give every side the same amount of space */
    button {
      padding: 1rem;
    }
  </style>
</head>
<body>
  <!-- Keep the label in its own text container -->
  <button type="button"><span>Continue</span></button>
</body>
</html>

What does this code do?

The button element creates the browser's native clickable control.
The padding: 1rem declaration applies the same space to all four sides. No edge receives a custom nudge.
The span element keeps the visible label in its own text container.

Save centered-button.html.

Before you load the file, do you expect equal padding to make the label look perfectly centered?

Drag centered-button.html from the project folder into the browser window from earlier.

You'll see one plain Continue button. The label sits slightly low inside the box even though every side uses the same padding.

You have your baseline. Every later change can now be compared with the same button.

Don't see the plain button?

Check that centered-button.html is saved inside the project folder from earlier.
Reload the local file after saving a correction.
Help me find why my local button file is not rendering in the browser.

✔️ Awesome, I've got everything!

Your baseline file now contains one plain equal-padding button.

ⓧ I'd like to double check the full code

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Centered Button</title>
  <style>
    /* Give every side the same amount of space */
    button {
      padding: 1rem;
    }
  </style>
</head>
<body>
  <!-- Keep the label in its own text container -->
  <button type="button"><span>Continue</span></button>
</body>
</html>

Preserve the visual baseline

A screenshot freezes the untouched rendering before later changes alter it. This gives you evidence that equal numeric padding does not guarantee equal-looking space.

Frame the browser so the whole button has visible space around it.
Use your device's screenshot tool to capture the browser window.
Save the image as baseline-button.png inside the project folder from earlier.

Before you preview the saved image, do you expect the button to look balanced or slightly low?

Double-click baseline-button.png in the project folder to preview it.

You'll see the full button with its label sitting visually low in the box. The screenshot preserves the shortfall created by the font's vertical space.

You have captured the exact shortfall this project will solve. The equal-padding baseline now gives every later change a fair comparison.

Your baseline is documented. Next, you'll use DevTools to compare the space above the label with the space below it.

Measure the Text Box

Your baseline screenshot captured the symptom. The label looks low even though all four padding values match.

Equal CSS padding describes the space around the element. DevTools lets you measure the rendered text box around the visible letters.

In this step, get ready to:

Select the rendered button label in DevTools.
Measure the space above the visible letters.
Measure the space below the visible letters.

Select the rendered label

The element that directly contains the label gives you a stable boundary for both measurements. Selecting it also reveals the rendered dimensions without changing your file.

Switch back to the browser tab displaying centered-button.html.
Activate Inspect mode from the DevTools action bar.
Click the visible button label.

You will see the corresponding element highlighted in the Elements panel.

What Are You Selecting?

The selected element owns the label's text box. Its highlighted boundary provides the reference point for measuring the blank space around the visible letters.

Measure both text gaps

A pixel ruler turns the visual imbalance into two distances. The faint antialiased edge makes the letter boundary slightly fiddly.

Open the Command menu by pressing Cmd+Shift+P on macOS or Ctrl+Shift+P on Windows.
Type Show rulers on hover into the command search field.
Select Show rulers on hover.
Hover over the selected label element in the Elements panel.
Use the outermost clearly visible row of letter pixels as the label edge.
Record the upper gap by counting from the top of the highlighted text box to the top of the visible letters: space above in pixels.
Record the lower gap by counting from the bottom of the visible letters to the bottom of the highlighted text box: space below in pixels.

You now have two measurements from the same button state shown in baseline-button.png.

Cannot See Clear Measurements?

Select the innermost element that directly contains the button text.
Increase the page zoom until the visible letter edges line up clearly with the pixel scale.
Use the equivalent pixel ruler or measurement overlay if your browser names the feature differently.

Help me measure the space around my button label in DevTools.

Compare the measurements

Before you compare the values, consider whether the upper gap and lower gap will match.

Compare your recorded upper gap with your recorded lower gap.
Refer back to baseline-button.png to connect the measured difference with the label's low position.

The two values differ. Good work. You have turned a visual hunch into a measurable imbalance.

Why Equal Padding Looks Uneven

Padding starts at the element's content boundary. Font metrics determine where the visible letterforms sit inside their line box.

Your measurements capture the internal space that equal padding cannot control.

You now have evidence that the rendered text space is uneven while centered-button.html remains unchanged. Next, you will trim that built-in space without touching the equal padding values.

Trim the Text Box

Your measurements proved that equal padding still leaves the label sitting low. The unequal space comes from font leading built into the typeface.

CSS text-box properties let the browser trim that leading around the letters. You will apply them without changing the button's existing padding.

In this step, get ready to:

Preview text-box trimming in DevTools.
Save the trim declarations in centered-button.html.
Verify the label moves to the middle while the padding remains equal.

Preview the trim in DevTools

DevTools provides a temporary place to test these declarations before saving them. Apply them to the element that directly contains the label text.

Return to DevTools from earlier.
Select the element that directly contains the button's label text.
Add the declarations to its matching CSS rule by pasting this code:

/* Trim the font leading at both text-box edges. */
text-box-trim: trim-both;
text-box-edge: cap alphabetic;

What Do These Declarations Do?

The text-box-trim property uses trim-both to remove space from the upper edge plus the lower edge.
The cap value places the upper edge at the font's cap height.
The alphabetic value places the lower edge at the alphabetic baseline.

Look at the button preview after DevTools accepts both declarations.

You should see the label shift toward the visual middle of the button. The button's existing padding stays untouched.

Label Staying in the Same Place?

Confirm both declarations are on the element that directly contains the text. A surrounding layout element has a different text box.

Check that the browser accepts both declarations. Re-enter each property plus its value exactly as shown above.

Help me diagnose why the text-box declarations are not moving my button label.

Save the trim in the file

DevTools previews disappear when the page reloads. The same declarations need a permanent home in the CSS inside your existing file.

Switch back to centered-button.html in your code editor.
Find the CSS rule you just edited in DevTools.
Add these declarations immediately before that rule's closing brace:

/* Trim the font leading at both text-box edges. */
text-box-trim: trim-both;
text-box-edge: cap alphabetic;

Why Does the Padding Stay Equal?

These declarations change the label's text-box boundaries. The existing padding continues to control the space outside those boundaries.

The browser now measures from visible font metrics. No hand-tuned padding offset is needed.

Before you reload, which part do you expect to move: the button edges or the label inside them?

Save centered-button.html.
Reload centered-button.html in your browser.

You should see the button keep its original outer size. The label now appears optically centered.

Compare the reloaded button with baseline-button.png.
Inspect the button to confirm its original equal padding declaration remains active.

The baseline screenshot shows the label sitting low. The reloaded version shows the label sitting in the visual middle.

DevTools should still show the same padding value on all four sides.

Reload Restoring the Old Layout?

Confirm centered-button.html is saved in your code editor.
Check that both declarations sit inside the CSS rule for the element containing the label text.
Reload the browser after correcting the file.

Help me find why my saved text-box declarations disappear after reload.

You have removed the low-looking offset without touching the padding. Your button now relies on font metrics to place its label.

Your button now centers this typeface with its equal padding intact. Next, you will swap typefaces to test whether the same declarations keep working.

Compare Three Typefaces

The trimmed label in your button now sits in the middle while the equal padding stays untouched. The browser removes the font leading without a hand-tuned nudge.

One typeface can make a fragile fix look reliable. A three-typeface comparison shows whether the same CSS centering survives different letter shapes.

In this step, get ready to:

Create a row of three matching trimmed buttons.
Apply all three planned typefaces without changing the shared padding.
Verify every label remains optically centered.

Build the three-button comparison

A fair comparison starts with identical HTML markup. Each copy must inherit the existing equal padding plus the text-box declarations.

Switch back to centered-button.html in your code editor.
Locate the existing button element that contains the trimmed label.
Copy the complete button element.
Paste one copy immediately after the original button.
Save centered-button.html.
Reload centered-button.html in the browser.

You should see two matching trimmed buttons. Both buttons should contain identical label text.

Return to centered-button.html in your code editor.
Paste another copy immediately after the first copy.
Confirm all three buttons contain identical label text.
Save centered-button.html.
Reload the comparison page in the browser.

You should now see three matching trimmed buttons. Each copy should retain the same visual dimensions.

Return to centered-button.html in your code editor.
Update the element containing the three buttons so its children display in one horizontal row.
Save centered-button.html.
Reload the comparison page in the browser.

Your comparison frame is ready. You should see three identical buttons sitting side by side.

Seeing Fewer Than Three Buttons?

Count the button elements in centered-button.html.
Confirm the file contains three complete button elements.
Restore the copied label text if any version differs.

Ask for help with the comparison markup: Why does my HTML page show fewer than three matching buttons?

Change only the typeface

The shared button styling stays fixed. Only the font family changes on the copied buttons.

Keep the first button's original font family unchanged.
Add a serif font family declaration to the second button.
Save centered-button.html.
Reload the comparison page in the browser.

The second label should now use serif letter shapes. It should remain visually centered inside the same equal padding.

Return to centered-button.html in your code editor.
Add a tall-x-height sans-serif font family declaration to the third button.
Save centered-button.html.
Reload the comparison page in the browser.

The third label should now use taller lowercase letter shapes. Its visual centre should still match the other two versions.

Do the Typefaces Look Identical?

Choose a locally available serif typeface for the second button.
Choose a locally available tall-x-height sans-serif typeface for the third button.
Check that each font family declaration is attached to its intended button.

Ask for help with the font swap: Why are my three buttons still rendering with the same typeface?

Prove the padding holds

The comparison proves the technique only when every version shares the same padding values. DevTools gives you the measurable check behind the visual result.

Before the final reload, which typeface do you think is most likely to reveal a hidden vertical nudge?

Reload the comparison page in the browser.

All three labels should sit in the visual middle of their buttons. The letter shapes change while the centre holds.

Return to DevTools from earlier.
Inspect the original-typeface button.
Inspect the serif button.
Inspect the tall-x-height sans-serif button.
Compare the displayed padding values across all three buttons.
Confirm the text-box trim declaration applies to all three buttons.
Confirm the text-box edge declaration applies to all three buttons.

DevTools should report identical padding on every button. Each label should remain optically centered despite the typeface changes.

What Does This Prove?

Typography changes across the comparison. The padding values remain fixed.

Trimmed font metrics create the consistent visual centre across typefaces. Your button no longer depends on a typeface-specific nudge.

Do the Padding Values Differ?

Remove any per-button padding declaration from the copied buttons.
Keep the equal padding values in the shared button rule.
Check that every copy inherits the shared text-box declarations.

Ask for help with the shared styles: Why do my three buttons show different padding values in DevTools?

Your button now keeps its visual centre across three typefaces. Next up, you will place an icon beside the label to test their shared centre line.

Align an Icon and Label

Your three-button comparison now proves that CSS text-box trimming holds across three typefaces. The next test adds an icon to that same component.

An icon introduces a second visual box beside the label. The button's layout now has to place both boxes on one center line without changing the equal padding.

In this step, get ready to:

Add the same icon beside each trimmed label.
Align each icon-label pair on a shared visual center line.
Verify that all three buttons retain their equal padding values.

Add an icon beside each label

Text-box trimming belongs to the label's text container. The icon needs its own place beside that label.

Return to centered-button.html in the code editor from earlier.
Locate the label markup inside each of the three buttons.
Choose one icon for all three comparison buttons.
Place a copy of that icon immediately before each label.
Confirm that the existing text-box trim and edge declarations remain on the label text.
Leave every padding value unchanged.
Save centered-button.html.
Reload the comparison page in your browser.

You'll see the chosen icon beside all three labels. The comparison now contains the content needed for the alignment test.

Icon missing from a button?

Check that each button contains its own copy of the icon immediately before its label. Confirm that the icon sits outside the trimmed label element.

Ask for help with finding the missing icon markup.

Center the icon-label pair

The shared button layout controls how the icon and label relate to each other. Shared center alignment keeps both visual boxes balanced inside the unchanged padding.

Return to centered-button.html in the code editor.
Locate the shared inline layout rule used by all three buttons.
Set the icon and label to align on their shared center line.
Confirm that the text-box trim declarations still apply only to each label.
Save centered-button.html.
Reload the comparison page in your browser.

You'll see each icon sit level with its neighbouring label. The icon-label pair remains centered inside every button without a padding adjustment.

Why does the label keep the trim?

Text-box trimming removes the font's extra leading from the text container. Keeping the icon outside that container preserves its own dimensions while the button layout aligns both shapes.

Icon still sitting high or low?

Confirm that the shared center alignment applies to the element that directly contains both the icon and label. Check that the icon has not been placed inside the trimmed label element.

Ask for help with diagnosing the icon alignment.

Verify all three typefaces

The element inspector in DevTools lets you confirm that the visual improvement came from alignment while the padding stayed untouched.

Before you inspect the buttons, do you expect the icon-label pairs to stay centered across all three typefaces while the padding values remain equal?

Switch back to DevTools from earlier.
Select the original-typeface button with the element inspector.
Compare the visual center line of its icon and label.
Check its displayed padding values.
Repeat the inspection for the serif button.
Repeat the inspection for the tall-x-height sans-serif button.
Keep baseline-button.png unchanged.
Keep the recorded text-box measurements from earlier unchanged.

You'll see the icon and label share a visual center line in the original typeface, the serif typeface, and the tall-x-height sans-serif typeface. You'll also see the same equal padding values on all three buttons.

That is the key proof: your component keeps its balance when both the typeface and the button content change.

Your buttons now stay balanced across three typefaces with an icon added. Next up, you will add and test the fallback for browsers without text-box trimming support.

Add a Feature Fallback

Your three icon buttons now keep every label aligned with its icon. The result holds across every typeface in the comparison.

However, CSS text-box support varies across browsers. This step keeps equal padding as a safe baseline while supported browsers apply the optical-centering enhancement.

In this step, get ready to:

Keep plain equal padding as the default button style.
Gate the text-box declarations behind a feature query.
Confirm the fallback path in DevTools.

Add the feature query

A feature query asks the browser whether it understands a specific CSS declaration. When the condition fails, equal padding remains active as the fallback.

How Should the Cascade Be Structured?

The normal label rule keeps the existing equal padding. A matching label rule inside @supports carries the two enhancement declarations.

The query condition uses the exact text-box-trim property-value pair already in your file. Browsers that accept the condition also apply text-box-edge.

In centered-button.html, locate the text label rule from the previous step.
Reorganize that rule to match the fallback-first cascade described above.
Save centered-button.html.

Before the refresh, make a quick prediction about whether the three buttons will move.

Refresh the comparison page in your browser.

Good. The comparison should look unchanged because your browser still applies the guarded text-box enhancement.

Each label should remain visually centered beside its icon. The equal padding values should remain unchanged.

Did the Labels Move After Refresh?

Confirm that the normal label rule still contains its original equal padding. Confirm that only the existing text-box declarations moved inside @supports.

Check that the query condition uses the same text-box-trim value as the guarded declaration.

Help me fix a CSS feature query that changes my button layout when the supported enhancement applies.

Test the fallback path

A declaration checkbox in DevTools can temporarily remove an enhancement from the rendered page. This recreates the visual path used when the guarded declarations do not apply.

Return to the browser from earlier.
Select one button label in the Elements panel.

The Styles pane now shows the CSS rules that apply to the selected label.

Find the guarded label rule inside @supports.

Before you disable the enhancement, make a quick prediction about which part of the button will shift.

Hover over the text-box-trim declaration until its checkbox appears.
Clear the checkbox beside text-box-trim.
Clear the checkbox beside text-box-edge.

You should see the selected label settle toward the lower position from baseline-button.png. The button keeps its equal padding.

The icon remains visible beside the label. That is the plain-padding fallback doing its job.

Compare the fallback label position with baseline-button.png.

No Visual Change After Toggling?

Select the text container that owns the text-box-trim declaration. The flex parent controls the icon layout and does not reproduce the text-box fallback.

Confirm that both text-box declarations are crossed out in the Styles pane.

Help me find why disabling the text-box declarations does not change my button label.

Record and restore the final state

A support note turns this visual test into a maintenance record. Restore the enhancement afterward so the reusable snippet finishes in its complete state.

Return to the notes area that contains text-box-measurements.
Add a heading named browser-support-notes.

Your notes now have a dedicated place for browser support results.

Record the browser version whenever the feature query remains inactive during a browser test.
Record DevTools emulation: text-box-trim disabled and text-box-edge disabled in Styles. for the test you just completed.

Your support note now identifies the exact condition that activated the plain-padding fallback.

Return to the guarded label rule in the Styles pane.
Re-enable the checkbox beside text-box-trim.
Re-enable the checkbox beside text-box-edge.

Before the final reload, predict whether all three labels will return to their optical center lines.

Reload centered-button.html.
Confirm that the guarded label rule is active in the Styles pane.

You should see three equal-padding buttons with an icon beside each optically centered label. The original typeface should match the serif typeface plus the tall x-height sans-serif typeface.

You now have a reusable button snippet that enhances itself when text-box support is available. Its plain-padding fallback keeps the component usable everywhere else.

Still Seeing the Fallback?

Confirm that both declaration checkboxes are enabled. Reloading the page also clears temporary DevTools changes.

Check that the @supports condition exactly matches the text-box-trim declaration inside it.

Help me restore the text-box enhancement after testing my plain-padding fallback.

Secret mission

Run a Button Resilience Audit

Stress-test the existing comparison across all three typefaces. Compare enhanced rendering with the plain-padding fallback. Use the existing evidence to make a design-system rollout decision.

Clean Up Your Resources

All four project artifacts live on your computer. They create no ongoing costs.

Resources you used:

The reusable centered-button.html comparison snippet.
The original baseline-button.png screenshot.
The browser-support-notes record.
The text-box-measurements record.

Keep everything running

No action is needed. Choose this option if you want to reuse the snippet or test more typefaces.

Keep centered-button.html as a reusable button-centering snippet.
Retain baseline-button.png as visual evidence of the original alignment problem.
Retain browser-support-notes as your fallback compatibility reference.
Retain text-box-measurements as measurable evidence of the uneven text space.

Pause - I'll come back to this later

Shut down the open tools to free up memory. Your four local artifacts stay ready for later.

Close the browser from earlier.
Close the code editor from earlier.

Delete - I don't want to use this again

Deleting files can feel final. This removes only the four local artifacts listed above.

macOS

Move centered-button.html from the code editor's file tree to Trash.
Move baseline-button.png from the code editor's file tree to Trash.
Move browser-support-notes from the code editor's file tree to Trash.
Move text-box-measurements from the code editor's file tree to Trash.
Permanently remove these four project artifacts from Trash.
Return to the code editor from earlier to confirm that its file tree no longer lists the four artifacts.

Windows

Move centered-button.html from the code editor's file tree to the Recycle Bin.
Move baseline-button.png from the code editor's file tree to the Recycle Bin.
Move browser-support-notes from the code editor's file tree to the Recycle Bin.
Move text-box-measurements from the code editor's file tree to the Recycle Bin.
Permanently remove these four project artifacts from the Recycle Bin.
Return to the code editor from earlier to confirm that its file tree no longer lists the four artifacts.

Nice Work!

You did it! Your reusable CSS snippet in centered-button.html keeps icons and labels optically centered across three typefaces.

You've learned how to:

Captured baseline evidence in baseline-button.png that reveals how equal padding can leave text sitting low. Recorded unequal text-box measurements with DevTools to prove the imbalance.
Applied text-box trim and edge rules inside a CSS feature query. Confirmed the same equal padding keeps each label centered across the original, serif, and tall x-height sans-serif typefaces.
Added icons with aligned labels on a shared centre line. Verified the plain-padding fallback under the browser conditions captured in browser-support-notes.
Secret Mission: Completed an optional challenge that pushes this reusable centering pattern further.

Ready to quiz yourself?