How to align a Div to float right and middle?

user_4058178 0
Viewed 53

I am building a custom chips control and facing a problem in aligning a close div to the right and middle. Can someone help please. I want to align the close button vertically middle if the text wraps to multiple lines

enter image description here

<div class="chips-container">
  <div *ngFor="let item of items; let i = index" class="chips">
    <div class="chip-text">{{ item }}</div>
    <div class="chip-close">x</div>
  </div>
  <input
    class="input-chips"
    (keyup.enter)="add($event)"
    (keyup)="autogrow($event)"
    style="width: 15px"
  />
</div>

My Style

.chips-container {
  border: 1px solid gray;
  height: auto;
  min-height: 30px;
  width: 230px;
  position: relative;
}

.chips {
  background-color: rgb(236, 236, 236);
  border: 1px solid rgb(124, 124, 124);
  border-radius: 14px;
  margin: 3px;
  padding-left: 3px;
  height: auto;
  display: inline-block;
}

.chip-text {
  display: inline-block;
  vertical-align: middle;
  word-wrap: break-word;
}

.chip-close {
  background-color: rgb(204, 204, 204);
  height: 20px;
  width: 20px;
  border-radius: 50%;
  //display: inline-block;
  text-align: center;
  margin-left: 2px;
  float: right;
}

I replaced my Divs with table layout and it looks good, however, my input text control aligns in the bottom

<div class="chips-container">
  <table
    *ngFor="let item of pgFilters[i].value; let i = index"
    class="chips"
   >
   <tr>
     <td class="chip-text">{{ item }}</td>
     <td><div class="chip-close">x</div></td>
   </tr>
  </table>
 <input
   style="width: 15px"
 />
</div>

enter image description here

angular css html
1 Answers

Use positioning, put relative position on the parent element, in your case: .chips, and then relative position on the .chip-close, and then position it as you wish. Btw also added padding-right on the text itself, just so the word wouldn't overlap with the x icon.

.chips-container {
  border: 1px solid gray;
  height: auto;
  min-height: 30px;
  width: 230px;
  position: relative;
}

.chips {
  background-color: rgb(236, 236, 236);
  border: 1px solid rgb(124, 124, 124);
  border-radius: 14px;
  margin: 3px;
  padding-left: 3px;
  height: auto;
  position: relative;
}

.chip-text {
  display: inline-block;
  word-wrap: break-word;
  padding-right: 20px;
}

.chip-close {
  background-color: rgb(204, 204, 204);
  height: 20px;
  width: 20px;
  border-radius: 50%;
  text-align: center;
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
}
<div class="chips-container">
  <div *ngFor="let item of items; let i = index" class="chips">
    <div class="chip-text">this is just a test tjak jldskfds lsdjkf kjdf eljf lsadjfoi lajkdfoasdfkj    </div>
    <div class="chip-close">x</div>
  </div>
  <input
    class="input-chips"
    (keyup.enter)="add($event)"
    (keyup)="autogrow($event)"
    style="width: 15px"
  />
</div>

user_178666010
Related