CODEWITHSUNDEEP
htmlcsscentering
Fat Trat
Fat Trat

Reputation: 77

How to center multiple buttons on top right next to other

I'm new to prgramming. I'm trying to align the multiple buttons on top to the center of the page, I have tried text-align and margin: 0; none of which have worked. Now, I have centered the buttons but the buttons are below each other. Is there any fix to this? How exactly do I center it? I'm using flask.

CSS:

#navBar {
    border: 2px solid black;
    margin: auto;
    height: 30px;
    width: 43%;
    padding: 5px;
}

#searchInput {
    position: absolute;
    top: 20px;
    right: 0;
    height: 35px;
    width: 185px;
    border-radius: 10px;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    outline: none;
}

/*The buttons that I want centered*/
#dealsButton, #burgersButton, #drinksButton, #sidesButton, #dessertsButton{
    border: none;
    outline: none;
    background-color: transparent;
    color: #606060;
    top: 30px;
    font-size: 27px;
    font-family: 'Roboto', sans-serif;
    width: 40%;
    margin-left: 30%;
    margin-right: 30%;
}

This is the image. The border is aligned to the center and is supposed to contain the buttons next to each other as a Nav bar. I want each of the buttons to be centered too. I want all the buttons to be centered at the same place and then I will move each button individually to the left and right. But if you know a way to center all of them side by side, please let me know.

enter image description here

Upvotes: 1

Views: 1324

Answers (1)

Thatkookooguy
Thatkookooguy

Reputation: 7012

you have some problems in your CSS code that prevent you to reach your goal:

  • each button has a big margin on left-right, which makes it so that not enough items can fit in a single row
  • when you set each button size as percent, it refers to the parent element. if you have more than 2 buttons with 40% width, they will overflow the row to the next one.
  • about how to style multiple elements at the same time: Right now, you style each button based on its id, which is unique. But classes can be applied to multiple elements simultaneously, giving them all the same styling. So Instead of styling through ids (with #), I'm styling based on .btn, which tells the CSS to style everything with the class (represented by a dot) that's called btn

I also set display: flex, align-items: center, and justify-content: center on the parent element to tell it to align all items to center both horizontally and vertically.

so, here's a demo:

#navBar {
  border: 2px solid black;
  margin: auto;
  height: 30px;
  min-width: 43%;
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#searchInput {
  position: absolute;
  top: 20px;
  right: 0;
  height: 35px;
  width: 185px;
  border-radius: 10px;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  outline: none;
}


/* The buttons that I want to be centered */

.btn {
  border: none;
  outline: none;
  background-color: transparent;
  color: #606060;
  font-size: 27px;
  font-family: 'Roboto', sans-serif;
  /* used to show a line seperator */
  padding: 0 0.5em;
  border-right: 2px solid black;
}


/* Remove border for last item */

.btn:last-of-type {
  border-right: none;
}
<nav id="navBar">
  <a class="btn">Deals</a>
  <a class="btn">Burgers</a>
  <a class="btn">Drinks</a>
  <a class="btn">Sides</a>
  <a class="btn">Desserts</a>
</nav>

Upvotes: 1

Related Questions