how to center elements

Question

I usually have no problem with centering elements, but this time I can't do it. How i can center values on the right side? they are all different sizes and they must be centered and placed one directly below the other

.container {
  &-mode {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5%;
  }
  &-status {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5%;
  }
  &-port {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5%;
  }
  &-button {
    display: flex;
    justify-content: space-between;
    margin-top: 20%;
  }
}

.activated {
  background-color: #32cd32;
  color: white;
  padding: 1.5%;
}

.status_connection {
  color: #32cd32;
}

.port_number {
  text-decoration: underline;
  text-align: center;
}

<div class="container">
  <div class="container-mode">
    <p>field 1</p>
    <div class="activated">lorem lorem value 1</div>

  </div>
  <div class="container-status">
    <p>field 2</p>
    <div class="status_connection">lorem value 2</div>

  </div>
  <div class="container-port">
    <p>field 3</p>
    <div class="port_number">value 3</div>

  </div>
</div>

page view

score 0 · Accepted Answer · answered Dec 09 '21 at 07:55

i'm not sure if i understand you correctly, but i think you want something like this :

.flex-center{
    display: flex;
    align-items: center;
}

.flex-center-center{
    display: flex;
    align-items: center;
    justify-content: center;
}


.col-1{
    width: 20%;
}

.col-2{
    width: 80%;
}

 <div class="container">
            <div class="container-mode flex-center">
              <p class="col-1">field 1</p>
              <div class="activated flex-center-center col-2">lorem lorem value 1</div>
            </div>

            <div class="container-status flex-center">
              <p class="col-1">field 2</p>
              <div class="status_connection flex-center-center col-2">lorem value 2</div>
            </div>

            <div class="container-port flex-center">
              <p class="col-1">field 3</p>
              <div class="port_number flex-center-center col-2">value 3</div>
            </div>
</div>

score 0 · Answer 2 · answered Dec 09 '21 at 07:55

Wrap right side element inside a div

<div class="container">
    <div class="container-mode">
      <p>field 1</p>
      <div class="right-side-element"><div class="activated">lorem lorem value 1</div></div>
    </div>
    <div class="container-status">
      <p>field 2</p>
       <div class="right-side-element"><div class="status_connection">lorem value 2</div></div>
    </div>
    <div class="container-port">
      <p>field 3</p>
       <div class="right-side-element"><div class="port_number">value 3</div></div>
    </div>
  </div>

and set needed width to that div

.right-side-element{
   width:150px;
}

how to center elements

2 Answers2