How to use flexbox to have a centered item and another item on the left (on a bootom nav bar)?

Question

Im struggling to make my first item (number 1, as seen in the picture) stay in the middle of the bottom nav bar. Im using flexbox, so float: right doesnt work for my second item (number 2).

This is the picture:

This is my code:

<div className='Footer'>
      <div className='Footer-ContainerTeclado'>
            
            <FontAwesomeIcon icon={faVials} style={{color:"#0D69AF", margin:'15px'}}/>
            <h2>{NombreLab}</h2>
          

            <div className="custom-itemFooterTeclado">
              <FontAwesomeIcon icon={faPowerOff}/>
            </div>

      </div>
   </div>

And this is my css:

    .Footer{
    margin-top:1rem;
    padding: 0.5rem;
    background-color: rgb(255, 255, 255);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height:10vh;
}
    .Footer-ContainerTeclado{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.Footer-ContainerTeclado h2{
    color: black;
    order:2,
}

.custom-itemFooterTeclado{
    color:#E3655B;
    margin-left: auto;
}

I believe this might be a duplicate of [this question](https://stackoverflow.com/questions/33444666/how-to-center-align-one-flex-item-and-right-align-another-using-flexbox) and [this similar question](https://stackoverflow.com/questions/38948102/right-or-left-align-one-flex-item-while-keeping-the-others-centered). That second one has a highly voted answer with many approaches you might take-- I might personally favor grid, as it seems like potentially a better fit for your needs here. Good luck, and happy coding! — Alexander Nied, Jun 25 '21 at 15:09
@AlexanderNied thank you! I solved it using one of those answers! — le0nicolas, Jun 25 '21 at 15:23
Glad this worked! Thanks for adding your solution as an answer to the post for future visitors. Happy coding! — Alexander Nied, Jun 25 '21 at 15:42

Ivan Kharkivskyi · Answer 1 · 2021-06-25T15:23:16.453

0

<div className='Footer'>
      <div className='Footer-ContainerTeclado'>
            <div class="centered-block">
                <FontAwesomeIcon icon={faVials} style={{color:"#0D69AF", margin:'15px'}}/>
                <h2>{NombreLab}</h2>  
            </div>
            <div className="custom-itemFooterTeclado">
              <FontAwesomeIcon icon={faPowerOff}/>
            </div>
      </div>
   </div>

.Footer-ContainerTeclado{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

edited Jun 25 '21 at 15:23

answered Jun 25 '21 at 15:11

Ivan Kharkivskyi

569
1
4
22

I believe the asker wants the `
` centered and the "power off" button right aligned. – Alexander Nied Jun 25 '21 at 15:19

score 0 · Accepted Answer · answered Jun 25 '21 at 15:24

0

Solved it with an answer from the other post:

 <ul>
  <li class="a">A</li>
  <li>B</li>
  <li>C</li>
  <li class="d">D</li>
</ul>

ul {
  display:flex;
  justify-content:center;
}


.a,.d {
  margin-left:auto;
}

answered Jun 25 '21 at 15:24

le0nicolas

83
10

How to use flexbox to have a centered item and another item on the left (on a bootom nav bar)?

2 Answers2