How to horizontally align items using flexbox?

Related searches

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 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

Aligning Items in a Flex Container, In a Flexbox Container. Use justify-content for the alignment of items horizontally. Use align-items to align items vertically. Have a look at the� The magic happens when you set the display property to flex. When the display is set to flex you can use more flexbox properties to direct the layout properties. align-items; justify-content; flex-direction; align-items and justify-content are the important properties to absolutely center text horizontally and vertically.

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>

CSS Flexbox Center Anything Vertically & Horizontally (Tutorial), Imagine a horizontal flexbox layout. That horizontal flow is the main axis, so align -items is the alignment opposite that, on the vertical axis. Bear in� When working with column-based layouts, you can use the align-items property to center flex items horizontally, as in this case, the cross axis runs horizontally. In CSS:.container { display: flex; flex-direction: column; align-items: center; } Here, the justify-content property also stays at its default value (flex-start).

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>

Flexbox align items horizontally, As this is more than is needed to display my flex items I have spare space vertically in the container. I can then use align-content with any of the� After any over-ride if you need to revert back to horizontal, use flex-direction: row; Use justify-contentto define how items are laid along main axis. Use align-itemsto define how items are laid along cross axis. For the following examples maindiv is the container that has 3 child divs.

align-items, There are a few ways to align elements in CSS. The vertical-align property has no effect on flex or grid items, and therefore if used as part of a� Horizontally aligns the flex items when the items do not use all available space on the main-axis: align-items: Vertically aligns the flex items when the items do not use all available space on the cross-axis: flex-wrap: Specifies whether the flex items should wrap or not, if there is not enough room for them on one flex line: align-content

Everything You Need To Know About Alignment In Flexbox , You are using flexbox with the default flex-direction: how to horizontally align bootstrap flex items in different div flex containers. Hot Network Questions

How To Align Things In CSS — Smashing Magazine, With Flexbox, we need one element that centers horizontally, and another (the child element) that centers vertically. The order of items is defined by flex-direction. How the element positions itself in the available space is set by align-self on the element or align-items on its parent. With Grid, we need three columns and three rows.

Comments
  • could you please attach the relevent HTML part as well
  • Try removing this line flex-flow: row wrap;. Besides that do what this guy said ^^^
  • Does this answer your question? Flexbox align items horizontally
  • Nope, justify-content doesn't do anything.
  • why don't you give width to parent div topButtons instead of giving margin to the rightone
  • I have the left and right classes since they have their own set of buttons.
  • 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.