Проблема с вертикальным выравниванием в некоторых пользовательских тегах <li>и <span>

Question

Я пытаюсь создать элемент, аналогичный элементу "chip", представленному в библиотеке Angular Material (https://material.angular.io/components/chips/overview).

Элемент, который я хочу построить, имеет тег li, который действует как контейнер. Внутри этого элемента я вставляю два тега span, один из которых содержит текст, а другой - «x», что позволяет пользователю удалять весь чип.

У меня есть маленький х (размер шрифта: 10 пикселей), который встроен в текст. Я хотел бы сделать х больше (около 18px или 20 px), но когда я пытаюсь увеличить его, я больше не могу выровнять его с текстом (текст выпадающий) Вот мой код:

.selection-choice {
    float: left;
    padding: 0px 15px 0px 5px;
    background-color: rgb(102, 0, 204);
    color: white;
    height: 28px;
    border-radius: 14px;
    font-size: 13px;
    box-sizing: border-box;
    display: list-item;
    list-style: none;
    line-height: 15px;
    font-family: sans-serif;
}


.selection-choice-remove {
    border: 1px white solid;
    margin: 4px 5px 0px 0px;
    padding: 2px 5px 0px 6px;
    height: 75%;
    color: white;
    width: 20px;
    border-radius: 14px;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    box-sizing: border-box;
    font-family: sans-serif;
    font-size: 10px;
}

<li class="selection-choice" title="EXAMPLE">
 <span class="selection-choice-remove" role="presentation">×</span> 
 <span>EXAMPLE</span>
</li>

Большое спасибо, кто может мне помочь.

Answer 1

Когда вы используете padding для позиционирования X, он не будет масштабироваться должным образом, если вы измените размер (будь то размер шрифта или размер любых родительских / дочерних элементов).Попробуйте изменить последнее значение (padding-left) в зависимости от размера шрифта, который вы назначаете для X. В этом случае измените padding: 2px 5px 0px 6px на padding: 2px 5px 0px 4px.Вы также можете добавить класс к тексту, присвоить ему position: relative и соответствующим образом расположить его.

.selection-choice {
    float: left;
    padding: 0px 15px 0px 5px;
    background-color: rgb(102, 0, 204);
    color: white;
    height: 28px;
    border-radius: 14px;
    font-size: 13px;
    box-sizing: border-box;
    display: list-item;
    list-style: none;
    line-height: 15px;
    font-family: sans-serif;
}

.text {
    position: relative;
    bottom: 1px;
}

.selection-choice-remove {
    border: 1px white solid;
    margin: 4px 5px 0px 0px;
    padding: 2px 5px 0px 4px;
    height: 75%;
    color: white;
    width: 20px;
    border-radius: 14px;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    box-sizing: border-box;
    font-family: sans-serif;
    font-size: 17px;
}

<li class="selection-choice" title="EXAMPLE">
 <span class="selection-choice-remove" role="presentation">×</span> 
 <span class="text">EXAMPLE</span>
</li>

Answer 2

теперь его font-size равно 18px;

.selection-choice {
    float: left;
    padding: 0px 15px 5px 5px;
    background-color: rgb(102, 0, 204);
    color: white;
    height: 28px;
    border-radius: 14px;
    font-size: 13px;
    box-sizing: border-box;
    display: list-item;
    list-style: none;
    line-height: 15px;
    font-family: sans-serif;
}


.selection-choice-remove {
    text-align: center;
    border: 1px white solid;
    margin: 4px 5px 0px 0px;
    padding: 2px auto 0px ;
    color: white;
    width: 20px;
    height: 20px;
     line-height: 18px;
    border-radius: 100%;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    box-sizing: border-box;
    font-family: sans-serif;
    font-size: 18px;
}

<li class="selection-choice" title="EXAMPLE">
 <span class="selection-choice-remove" role="presentation">×</span> 
 <span>EXAMPLE</span>
</li>

Answer 3

Вы можете попробовать display:flex для 'selection-choice', при этом значок x будет сохранен, а текст будет иметь одинаковую линию и середину по вертикали. Что касается значка x, я удалил отступы и поля; вы просто используете text-align: center и line-height , чтобы сделать его посередине

 .selection-choice {
  float: left;
  padding: 0 5px;
  background-color: rgb(102, 0, 204);
  color: white;
  height: 28px;
  border-radius: 14px;
  font-size: 13px;
  box-sizing: border-box;
  display: list-item;
  list-style: none;
  line-height: 15px;
  font-family: sans-serif;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.selection-choice-remove {
  border: 1px white solid;
  margin: 0;
  padding: 0;
  height: 20px;
  width: 20px;
  color: white;      
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
  font-weight: bold;
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 18px;
  text-align: center;
  line-height: 16px;
}
.selection-choice .text{
	padding:5px 7px 
}

<li class="selection-choice" title="EXAMPLE">
 <span class="selection-choice-remove" role="presentation">×</span> 
 <span class="text">EXAMPLE</span>
</li>

Может быть, это полезно для вас.