некоторые коды символов css (\ 25b6 и \ 25c0) не выравниваются в flexbox - PullRequest
Новая
       7

некоторые коды символов css (\ 25b6 и \ 25c0) не выравниваются в flexbox

0 голосов
/ 10 июля 2020

Я использую коды символов CSS, чтобы показать два треугольника для предыдущего и следующего, и они размещены через flexbox. Я заметил странную проблему с вертикальным выравниванием.

Вот первый пример. Стрелки влево и вправо не совпадают. 

div {
  margin: 0 8px;
}
.container {
  display: flex;
  align-items: baseline;
  justify-content: center;
}
.some::before {
  content: "\25c0";
}
.more::after {
  content: "\25b6";
}
<div class="container">
  <div class="some">
    <a><span>some text</span></a>
  </div>
  <div class="other">
    Other Text
  </div>
  <div class="more">
    <a><span>some more text</span></a>
  </div>
</div>

Но когда я меняю стрелки на тот же символ CSS, они выравниваются 

div {
  margin: 0 8px;
}
.container {
  display: flex;
  align-items: baseline;
  justify-content: center;
}
.some::before {
  content: "\25b6";
}
.more::after {
  content: "\25b6";
}
<div class="container">
  <div class="some">
    <a><span>some text</span></a>
  </div>
  <div class="other">
    Other Text
  </div>
  <div class="more">
    <a><span>some more text</span></a>
  </div>
</div>

Я пробовал использовать flex-direction: column; и align-content безуспешно. Фактически, с помощью align-content обратное выравнивание произошло там, где другая стрелка была смещена.

добавление ссылки на JSFiddle, потому что она очень явно отображается там: https://jsfiddle.net/L2fgcpyv/2/

1 Ответ

0 голосов
/ 10 июля 2020

Так как эти два треугольника имеют разный размер. Я обнаружил, что они одинаковы и гораздо более согласованы в разных браузерах

https://unicode-table.com/en/25C4/

https://unicode-table.com/en/25BA/

...