How to horizontally align items using flexbox?

Question

Beginner here. For some reason in the website I'm coding, the to-be buttons don't align horizontally on the nav bar. I'm using flexbox, but even then it doesn't align them like how I want it to. There doesn't seem to be any problems in the code, either.

.topPart {
  position: fixed;
  overflow: hidden;
  top: 0;
  margin: 0px 15px 30px 15px;
  width: 1790
  padding: 30px;
  border: 2px solid #3cc851;
  background-color: #1f1f1f;
}


.topButtons {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: flex-center;
  height: 15px;
  width: auto;
  padding: 15px;
  background-color: #fff;
  color: #1f1f1f;
}


.topButtons .rightButtons {
  text-align: right;
  margin: auto 2px auto 1500px;
}


.topButtons .leftButtons {
  text-align: left;
  margin: auto 2% auto 2%;
}

   <div class="topPart">
     <h2> Website name I don't want to share </h2> <p> Website slogan I don't want to share </p>
     <!-- later, make it so that the boxes of text are lined up like how it looks in the code using css -->
   <div class="topButtons">
     <div class="leftButtons">
       <a href="index.html" class="home">home<a>
       <a href="" class="mssg">mssg board<a>
       <a href="database.html" class="data">database<a>
       <a href="roleplay.html" class="rp">rp<a>
     </div>
     <div class="rightButtons">
       <a href="" class="dms">dms</a>
       <a class="out">logout</a>
       <a class="acc">acc</a>
     </div>
     </div>
    </div>

The right buttons appear to be ~5px lower than the left ones. I'm at a complete loss here, there doesn't seem to be any errors in my code to cause this. Flexbox tags that should fix it don't do anything either, such as flex-direction: row; and justify-content.

What it looks like.

Try removing this line `flex-flow: row wrap;`. Besides that do what this guy said ^^^ — MomasVII, Jan 31 '20 at 04:21
Does this answer your question? [Flexbox align items horizontally](https://stackoverflow.com/questions/40572361/flexbox-align-items-horizontally) — Kiran Mistry, Jan 31 '20 at 04:31
why don't you give `width` to parent div `topButtons` instead of giving margin to the rightone — gaurav, Jan 31 '20 at 04:53

score 1 · Accepted Answer · answered Jan 31 '20 at 04:34

1

the div is a block element, so maintaining a width of auto would be essentially 100% of the available space which pushed the second div downwards.

try inline-flex or making the width a set amount rather than auto

answered Jan 31 '20 at 04:34

will

99
8

Himanshu Joshi · Answer 2 · 2020-01-31T05:09:23.443

This is happening due to the CSS properties of "text-align" and "margin" on ".leftButtons" and ".rightButtons" classes. You don't need to use these properties as you are using "display:flex" on ".topButtons" class. Horizontal and vertical alignment of child classes will manage by "justify-content: space-between;" and "align-items: center;" ".topButtons".

I have removed CSS properties of ".leftButtons" and ".rightButtons" classes. Updated "justify-content: space-between;" on ".topButtons" so that child classes horizontal align by leaving equal spaces between element.

I have also made some corrections in your markup which I have found, mentioned below: (1) Anchor (/a) closure tags was missing of child ".leftButtons". (2) In ".topPart" ";" was missing after width property declaration. Also added "px" of width value "1790".

Please check added code.

            .topPart {
              position: fixed;
              overflow: hidden;
              top: 0;
              margin: 0px 15px 30px 15px;
              width: 1790px;
              padding: 30px;
              border: 2px solid #3cc851;
              background-color: #1f1f1f;
            }

            .topButtons {
              display: flex;
              flex-flow: row wrap;
              /* justify-content: space-around; [old code] */ 
              justify-content: space-between;
              align-items: center;
              height: 15px;
              width: auto;
              padding: 15px;
              background-color: #fff;
              color: #1f1f1f;
            }

            /*---- [old code]----*/
            .topButtons .rightButtons {
              /*text-align: right;
              margin: auto 2px auto 1500px;*/
            }
            
            .topButtons .leftButtons {
              /*text-align: left;
              margin: auto 2% auto 2%;*/
            }

<div class="topPart">
         <h2> The Blood Tundra Kingdom </h2>
         <p> - never talk about the blood tundra kingdom </p>
         <!-- later, make it so that the boxes of text are lined up like how it looks in the code using css -->
           <div class="topButtons">
                 <div class="leftButtons">
                   <a href="index.html" class="home">home</a>
                   <a href="" class="mssg">mssg board</a>
                   <a href="database.html" class="data">database</a>
                   <a href="roleplay.html" class="rp">rp</a>
                 </div>
                 <div class="rightButtons">
                   <a href="" class="dms">dms</a>
                   <a class="out">logout</a>
                   <a class="acc">acc</a>
                 </div>
            </div>
        </div>

I have the left and right classes since they have their own set of buttons. — Xcy, Jan 31 '20 at 05:04
ok. That's fine. I have updated my code here now. You can still use your left and right classes for any other properties. Because alignment property is already handle by upper class. I think it is best way to make your code more optimize and useful. — Himanshu Joshi, Jan 31 '20 at 05:11

score 0 · Answer 3 · answered Jan 31 '20 at 05:12

You can define display: flex;,justify-content: space-between, align-items: center; in topPart class and equally divided width of inside div by this flex: 1 1 auto; css property.
I hope below snippet will help you lot.

*,*:before,*:after{box-sizing: border-box;}
body{margin: 0; padding: 0}
.topPart {
  position: fixed;
  overflow: hidden;
  top: 0;
  padding: 30px 20px;
  border-bottom: 2px solid #3cc851;
  background-color: #fff;
  width: 100%;
  z-index: 100;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  align-items: center;
}
.leftButtons {
  flex: 1 1 auto;
  text-align: left;
}
.centerButtons {
  text-align: center;
  flex: 1 1 auto;
}
.rightButtons {
  text-align: right;
  flex: 1 1 auto;
}
.centerButtons a, .rightButtons a{
  display: inline-flex;
  background-color: #ccc;
  padding: 4px 5px;
  text-decoration: none;
  color: #444;
  text-transform: capitalize;
}

<div class="topPart">
  <div class="leftButtons">
    <div>Website Name<br>Website slogan</div>
  </div>
  <div class="centerButtons">
    <a href="index.html" class="home">home</a>
    <a href="#" class="mssg">mssg board</a>
    <a href="database.html" class="data">database</a>
    <a href="roleplay.html" class="rp">rp</a>
  </div>
  <div class="rightButtons">
    <a href="" class="dms">dms</a>
    <a class="out">logout</a>
    <a class="acc">acc</a>
  </div>
</div>

How to horizontally align items using flexbox?

3 Answers3