Centering an element with css, but its fixed at the top

HTML-CSS
1

Can someone guide me on how to center an element ?
I know how to center it using align-items: center;
But the case here is that its a fixed div.
I also need the parent element not to be more longer than what is needed, that is, it shouldnt be longer than the length of the child elements in it(in this case, buttons).
Im not sure how to do this but this is what I tried to do.

Are there any clashes or overrides?

CSS → 

.topbar{
  position: fixed;
  background-color: rgb(221, 228, 186);
  font-size: 0;
  margin-bottom: 20px;
  align-items: center;
}

HTML part → 

      <div class="topbar">
        <div class="row">
          <a href="#about">
            <button class="btn btn-default">About</button></a>
          <a href="#early-life">
            <button class="btn btn-default">Early Life</button></a>
        </div>
        </div>

Can send link to the repl if needed as the original code is big and kinda messy.

2

Ok , I actually found a fix for this :laughing:

.topbar{
  width: auto;
  display: inline-block;
  font-size: 0px;
  position: fixed;
  left: 50%;
  background-color: rgb(221, 228, 186);
}
1 Like
3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.