How can I center my title even with an element next to it?

Question

I have tried everything and I still can't find a way to fix this "issue".

Here is my navbar:

Basically, I want the "pixelizer.io" to be centered, but the "log-in/register" prevents it from doing so.

If I make the text inside the button smaller, then "pixelizer.io" will be centered:

Here's the HTML:

    <nav>
      <h1>pixelizer.io</h1>
      <button id="join-button">log-in/register</button>
    </nav>

CSS (TITLE):

nav>h1 {
  width: 100%;
  clear: right;
  display: inline;
  margin: 0 auto;
  font-size: 3em;
}

CSS (BUTTON):

#join-button {
  float: right;
  padding: 7px;
}

CODEPEN: https://codepen.io/kibezin/pen/MWKvLGX

If you could attach a codepen link of visible issue with required html/css, that would be easy to see it and help you out. I've just created a codepen link with your given html/css but it doesn't seem to reproduce the issue you are facing. — anand, Jun 28 '20 at 02:44
@anand my bad, here it is: https://codepen.io/kibezin/pen/MWKvLGX — kibe, Jun 28 '20 at 02:48

score 2 · Accepted Answer · answered Jun 28 '20 at 02:52

2

I gave the button absolute positioning then created a flex container for the <nav>

nav {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

nav > h1 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  font-size: 3em;
}

#join-button {
  position: absolute;
  right: 5px;
  padding: 7px;
}

<nav>
    <h1>pixelizer.io</h1>
    <button id="join-button">log-in/register</button>  
</nav>

answered Jun 28 '20 at 02:52

Tanner Dolby

4,253
3
10
21

2

Exactly, here's where you can see it in codepen https://codepen.io/andyydna/pen/jOWLdQZ. when it comes to alignment of elements, flexbox is always my first choice. – anand Jun 28 '20 at 03:13

kshetline · Answer 2 · 2020-06-28T03:13:40.180

0

This'll do it:

nav {
  position: relative;
  text-align: center;
}

nav>h1 {
  display: inline;
  margin: 0 auto;
  font-size: 3em;
}

#join-button {
  padding: 7px;
  position: absolute;
  right: 0;
}

Making the button absolute positioned removes it from consideration for the layout of its siblings.

edited Jun 28 '20 at 03:13

answered Jun 28 '20 at 02:50

kshetline

12,547
4
37
73

nav is a block element so it should have width:100% so do we need to explicitly mention nav with width:100%? – Lovesh Dongre Jun 28 '20 at 03:03
Nope, it doesn't seem to be necessary. – kshetline Jun 28 '20 at 03:12

How can I center my title even with an element next to it?

2 Answers2