how to center elements

December 9, 2021

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

html:

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

css:

.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;
}

page view

>Solution :

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>