How to center only one inline element?

Question

I'm working to make a button and a title (text) in the same line. However, the title needs to be in the center, while the button stays on the left corner.

I've tried to center align the title, but the title stays right next to the button, instead of the center.

<button id="icon">Button</button>
<h1 id="title">Title</h1

#title {
  font-size: 12px;
  text-align: center;
  display: inline;   
}

#icon {
  display: inline;
}

Expected:

|[button]--------[centered title]--------|

Actual:

|[button][title]-------------------------|

You can try with margin, or combine in a div, then text-align. The mordern way is with flexbox — NVRM, Dec 21 '18 at 00:07

score 1 · Accepted Answer · answered Dec 21 '18 at 00:10

Quick and easiest way I would recommend is with flexbox.

<div id="container">
  <button id="icon">Button</button>
  <h1 id="title">Title</h1>
</div>

#title {
  font-size: 12px;
  text-align: center;
  flex: 5;   
}

#icon {
  flex: 1;
}

#container {
  display: flex;
}

Great intro to flexbox if you've never used it: https://www.youtube.com/watch?v=k32voqQhODc

How to center only one inline element?

1 Answers1