0

I have flex container and first element needs to align left and second center. I try different options with justify-content and align items => center so that the second element of this paging box is in the middle but there is no help.

This is css and html code

paging-section {
  display: flex;
  height: 60px;
}

/* .paging-section div {
  flex: 1;
} */

.pagination-info {
  align-items: flex-start;
  margin-top: 15px;
  background-color: red;
}

.pagination-box {
  width: auto;
  height: 38px;
  margin: 20px 308px 369px 215px;
  padding: 0 16px 0 16px;
  border-radius: 4px;
  box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.08);
  border: solid 1px #d8dce6;
  background-color: #ffffff;
  display: flex;
  background-color: yellow;
  // justify-content: center;
  // align-items: center;
}

<div class="paging-section">
  <div class="pagination-info">
    <p>
      {{ size }}
      {{ 'ADMIN.PAGINATION.RESULTS' | translate }}
    </p>
  </div>
  <div class="pagination-box">
     ....
  </div>
</div>

How to achieve that this yellow element is in the middle of the container and the first one remains on the left side ? Thanks enter image description here

redux17
  • 665
  • 5
  • 11
  • 30

1 Answers1

1

ive set fixed width to .pagination-info and also set margin: 0px auto; to .pagination-box at the end ive translate the .pagination-box to the left on half width of .pagination-info there is transform: translateX(-50px);

.paging-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  height: 60px;
}

/* .paging-section div {
  flex: 1;
} */

.pagination-info {
  align-items: flex-start;
  background-color: red;
  max-width: 100px;
  width: 100px;
  min-width: 100px;
  word-break: break-all;
}

.pagination-box {
  margin: 0px auto;
  transform: translateX(-50px);
  width: auto;
  height: 38px;
  padding: 0 16px 0 16px;
  border-radius: 4px;
  box-shadow: 0px 1px 2px 0 rgba(0, 0, 0, 0.08);
  border: solid 1px #d8dce6;
  background-color: #ffffff;
  display: flex;
  background-color: yellow;
  // justify-content: center;
  // align-items: center;
}
<div class="paging-section">
  <div class="pagination-info">
    <p>
      {{ size }}
      {{ 'ADMIN.PAGINATION.RESULTS' | translate }}
    </p>
  </div>
  <div class="pagination-box">
     ....
  </div>
</div>
Fakt309
  • 821
  • 5
  • 14